{"id":25834526,"url":"https://github.com/simonanewton/developer-log","last_synced_at":"2026-02-09T11:06:37.084Z","repository":{"id":60078263,"uuid":"531547820","full_name":"simonanewton/developer-log","owner":"simonanewton","description":"This web application utilizes the Twitter API to display tweets from my developer twitter account where I share my thoughts and comments while programming and researching.","archived":false,"fork":false,"pushed_at":"2024-12-20T21:02:39.000Z","size":7193,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-20T22:18:04.670Z","etag":null,"topics":["axios","bootstrap","expressjs","mern-stack","mongodb","nodejs","react","twitter-api"],"latest_commit_sha":null,"homepage":"https://web-developer-log.herokuapp.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/simonanewton.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-01T14:09:57.000Z","updated_at":"2024-12-20T21:02:43.000Z","dependencies_parsed_at":"2024-12-20T22:18:09.281Z","dependency_job_id":"c0c1ebbe-9216-47c9-924d-0566181228d7","html_url":"https://github.com/simonanewton/developer-log","commit_stats":null,"previous_names":["simonanewton/developer-log"],"tags_count":0,"template":false,"template_full_name":"simonanewton/mern-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonanewton%2Fdeveloper-log","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonanewton%2Fdeveloper-log/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonanewton%2Fdeveloper-log/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonanewton%2Fdeveloper-log/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simonanewton","download_url":"https://codeload.github.com/simonanewton/developer-log/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241300385,"owners_count":19940487,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","bootstrap","expressjs","mern-stack","mongodb","nodejs","react","twitter-api"],"created_at":"2025-03-01T00:58:33.387Z","updated_at":"2026-02-09T11:06:37.077Z","avatar_url":"https://github.com/simonanewton.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Developer Log\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"./assets/site-header.png\" alt=\"Web Developer Log Header\" width=\"80%\" /\u003e\n\u003c/div\u003e\n\n## NOTICE\n\nThis website is currently under maintenance due to issues with the X API. Will be back up within the week. - 8/23/25\n\n## Description\n\nThis project was created in effort to practice creating a full stack web application using a \nwell-established third party API from a popular platform. It has also been a useful way to use \na MERN stack application to practice working around a third party API in conjunction with a \nMongoDB database. By using the Twitter platform as a design model for this application, I was able to \nreplicate many of the important features of a social media feed, while being sure to design mobile-first.\n\nIMPORTANT: Since Twitter was bought and changed to X, this application no longer functions correctly \ndue to X making their API services no longer free. I have plans to manually input the profile's feed \ndata into the database so that the website can still show previous activity, but currently the hosted \nsite does not work.\n\n## Table of Contents\n\n* [Description](#description)\n* [Preview](#preview)\n* [Development](#development)\n* [Installation](#installation)\n* [Usage](#usage)\n* [Contributing](#contributing)\n* [Credits](#credits)\n* [License](#license)\n\n## Preview\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"./assets/site-preview.png\" alt=\"Site Preview\" width=\"100%\" /\u003e\n\u003c/div\u003e\n\n## Development\n\nThis code example is used to show how the main parent component asynchronously pulls data from the \nback-end internal API and passes it on to the child components. Visually, the app emulates the classic \nTwitter feed by styling first for the smallest viewport sizes taking advantage of Bootstrap's breakpoint \nclasses.\n\n```js\nclass App extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            tweets: [],\n            news: []\n        }\n    }\n\n    componentDidMount = async () =\u003e {\n        const response = await API.updateTweets();\n        console.log(response);\n\n        const tweets = await API.getTweets();\n        const listTweets = await API.getListTweets();\n        this.setState({ tweets: tweets.data, news: listTweets.data });\n    }\n\n    render() {\n        return (\n            \u003cContainer fluid=\"xxl\" className=\"px-0 h-100\"\u003e\n                \u003cRow className=\"g-0 vh-100\"\u003e\n                    \u003cCol sm={2} className=\"border-end border-white border-3...\"\u003e\n                        \u003cLeftPanel /\u003e\n                    \u003c/Col\u003e\n                    \u003cCol xs={12} sm={10} md={6} className=\"h-100 overflow-auto\"\u003e\n                        \u003cFeed tweets={this.state.tweets} /\u003e\n                    \u003c/Col\u003e\n                    \u003cCol md={4} className=\"border-start border-white border-3...\"\u003e\n                        \u003cRightPanel news={this.state.news} /\u003e\n                    \u003c/Col\u003e\n                \u003c/Row\u003e\n            \u003c/Container\u003e\n        );\n    }\n}\n```\n\n## Installation\n\nTo install the required npm packages to run this application, clone the repository and run the following command:\n```sh\nnpm install\n```\n\n## Usage\n\nTo use this application, run the following command:\n```sh\nnpm start\n```\n\n## Contributing\n\n\u003cdiv\u003e\n    \u003cimg src=\"./assets/profile-picture-circle.png\" alt=\"Simon Newton Profile Picture\" width=250 /\u003e\n    \u003ch3\u003e\u003cb\u003eSimon Newton\u003c/b\u003e\u003c/h3\u003e\n    \u003chr align=left width=350 /\u003e\n    \u003cp\u003eFull-Stack Web Developer!\u003c/p\u003e\n    \u003ca href=\"https://github.com/simonanewton\" target=\"_blank\"\u003eGitHub Profile\u003c/a\u003e | \u003ca href=\"https://www.linkedin.com/in/simonanewtondev/\" target=\"_blank\"\u003eLinkedIn Profile\u003c/a\u003e | \u003ca href=\"https://developer-portfolio-yqdu.onrender.com/\" target=\"_blank\"\u003ePersonal Website\u003c/a\u003e\n\u003c/div\u003e\n\n## Credits\n\nExternal API Reference\n* https://developer.twitter.com/en/docs/twitter-api\n\nDevelopment Resources\n* https://fontawesome.com/\n* https://reactjs.org/\n* https://react-bootstrap.github.io/\n\nPrimary NPM Packages\n* https://npmjs.com/package/react\n* https://npmjs.com/package/react-bootstrap\n* https://npmjs.com/package/mongoose\n* https://npmjs.com/package/express\n\n## License\n\n[![license](https://img.shields.io/badge/license-MIT-green)](https://simonanewton.mit-license.org)\n\nMIT License \u0026copy; Simon Newton \u003chttps://simonanewton.mit-license.org\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonanewton%2Fdeveloper-log","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimonanewton%2Fdeveloper-log","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonanewton%2Fdeveloper-log/lists"}