https://github.com/simonanewton/developer-log
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.
https://github.com/simonanewton/developer-log
axios bootstrap expressjs mern-stack mongodb nodejs react twitter-api
Last synced: 5 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/simonanewton/developer-log
- Owner: simonanewton
- License: mit
- Created: 2022-09-01T14:09:57.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-12-20T21:02:39.000Z (over 1 year ago)
- Last Synced: 2024-12-20T22:18:04.670Z (over 1 year ago)
- Topics: axios, bootstrap, expressjs, mern-stack, mongodb, nodejs, react, twitter-api
- Language: JavaScript
- Homepage: https://web-developer-log.herokuapp.com/
- Size: 6.86 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Web Developer Log
## NOTICE
This website is currently under maintenance due to issues with the X API. Will be back up within the week. - 8/23/25
## Description
This project was created in effort to practice creating a full stack web application using a
well-established third party API from a popular platform. It has also been a useful way to use
a MERN stack application to practice working around a third party API in conjunction with a
MongoDB database. By using the Twitter platform as a design model for this application, I was able to
replicate many of the important features of a social media feed, while being sure to design mobile-first.
IMPORTANT: Since Twitter was bought and changed to X, this application no longer functions correctly
due to X making their API services no longer free. I have plans to manually input the profile's feed
data into the database so that the website can still show previous activity, but currently the hosted
site does not work.
## Table of Contents
* [Description](#description)
* [Preview](#preview)
* [Development](#development)
* [Installation](#installation)
* [Usage](#usage)
* [Contributing](#contributing)
* [Credits](#credits)
* [License](#license)
## Preview
## Development
This code example is used to show how the main parent component asynchronously pulls data from the
back-end internal API and passes it on to the child components. Visually, the app emulates the classic
Twitter feed by styling first for the smallest viewport sizes taking advantage of Bootstrap's breakpoint
classes.
```js
class App extends Component {
constructor(props) {
super(props);
this.state = {
tweets: [],
news: []
}
}
componentDidMount = async () => {
const response = await API.updateTweets();
console.log(response);
const tweets = await API.getTweets();
const listTweets = await API.getListTweets();
this.setState({ tweets: tweets.data, news: listTweets.data });
}
render() {
return (
);
}
}
```
## Installation
To install the required npm packages to run this application, clone the repository and run the following command:
```sh
npm install
```
## Usage
To use this application, run the following command:
```sh
npm start
```
## Contributing
## Credits
External API Reference
* https://developer.twitter.com/en/docs/twitter-api
Development Resources
* https://fontawesome.com/
* https://reactjs.org/
* https://react-bootstrap.github.io/
Primary NPM Packages
* https://npmjs.com/package/react
* https://npmjs.com/package/react-bootstrap
* https://npmjs.com/package/mongoose
* https://npmjs.com/package/express
## License
[](https://simonanewton.mit-license.org)
MIT License © Simon Newton
