This is a simple Instagram like feed application. This application featured with infinite scrolling and multer image uploading. By using this application, you can post your image or any content and you can also like the post.
This project is developed by using MEAN (MongoDB, express.js, Angular, Node.js). MEAN is a set of open source components that together, provide an end-to-end framework for building dynamic web applications. The stack is made up of:
This project is deployed in Heroku. Please visit this link (https://feeds-app-mean.herokuapp.com/feeds) to preview the application.
In this application, I used Node.js(14.3.0), Express.js(4.17.1) as the back-end, Angular 9 as the Front-end and MongoDB as a database. I used postman platform for API request & Response and VScode as an IDE.
This project is divided into two folder structure, one is client folder where all the frontend code (Angular 9) stays there and rest of the files are backend code (node.js, express.js).
To run this application:
Run npm install to install all the needed packages for the backend(node.js), after the process finished. Navigate to the client folder in the project and then Run npm install to install all the needed packages for the frontend(Angular 9). In the project folder, Run npm run dev to start the development server. The development server is listing to the port 3000. Make sure you should install MongoDB application in your PC for the database connection.
Note: The both frontend and backend runs in the same port 3000. Because of this if you change any code in the client folder. you have to run the ng build command in client folder or npm run dev in the backend folder. Only then you can able to see the changes in the 3000 port.
You can access the following endpoints on http://localhost:3000/api/v1.0.0
| METHOD | URL | Description |
|---|---|---|
| GET | /feeds | Return the all feeds |
| GET | /feeds?page=1&limit=2 | Return the feeds based on query |
| POST | /feed | Create a new feed |
| PATCH | /feeds/:id | To update the feed like count |
Note: You need to pass the formData as a request body in POST method.
Follow me on LinkedIn to get the latest update about features, code, and more. If you like this project give a star to this repo.
Thanks to all contributors and their support.
If you have an idea or you want to do something, tell me or just do it!
I'm always happy to hear your feedback!
Code and documentation copyright 2020 the authors. Code released under the MIT License.