A small Full Stack Web Application for creating posts and displaying them in a post feed.
The application has a simple flow: users first create a post by selecting an image and entering a caption. After submitting the post, the created post is displayed in the Post Feed.
- Create a post with an image.
- Add a caption to the post.
- Upload and store images using ImageKit.
- Store post information in MongoDB Atlas.
- Use Mongoose to interact with MongoDB.
- Display created posts in a feed.
- Simple and clean React-based user interface.
- React.js
- Node.js
- Express.js
- Mongoose
- MongoDB Atlas
- ImageKit
The project follows a simple process:
Create Post
↓
Select Image
↓
Enter Caption
↓
Submit Post
↓
Image uploaded to ImageKit
↓
Post data stored in MongoDB Atlas
↓
Post displayed in Feed
The first page allows the user to create a post.
The user can:
- Select an image.
- Enter a caption.
- Click the Submit button.
After submitting the post, the application displays the created posts in a feed.
Each post contains:
- Uploaded image
- Caption
MongoDB Atlas is used to store the post information.
Mongoose is used to create the schema and communicate with MongoDB.
ImageKit is used for uploading and managing the images used in the posts.
Instead of storing the actual image directly in MongoDB, the image is uploaded to ImageKit and the required image information/URL is stored with the post data.
The main objective of this project is to understand the basic working of a Full Stack Web Application and learn how the frontend, backend, database, and external image-storage service work together.
This project helped in understanding:
- React frontend development
- Backend API creation
- Form and image handling
- MongoDB Atlas
- Mongoose
- ImageKit integration
- Frontend and backend communication
- Displaying database data dynamically
Some features that can be added in the future:
- User authentication
- Like and comment functionality
- Edit and delete posts
- User profiles
- Responsive UI improvements