A user-friendly and responsive posts sharing web application, where user can create posts using inbuilt Rich text editor. In this application user can create, update, delete posts. User can also comment on the posts along with edit and delete comment feature.
-
Download and Extract:
- Download the zip folder of this project from the 'code' section of the repository.
- Extract the folder to your desired location.
-
Open in an Editor (e.g., Visual Studio Code):
- Open your preferred code editor (e.g., VS Code).
- Navigate to the extracted project folder and open it in your editor.
-
Folder Structure:
- Inside the main folder, you'll find two subfolders:
backend: Contains the backend code.frontend: Contains the frontend code.
- Inside the main folder, you'll find two subfolders:
-
Setting Up Terminals:
- Open two separate terminals.
-
Backend Setup (Terminal 1):
- In Terminal 1, navigate to the
backendfolder:cd backend - Install the required dependencies:
npm install - Start the backend server in development mode:
npm run dev
- In Terminal 1, navigate to the
-
Frontend Setup (Terminal 2):
- In Terminal 2, navigate to the
frontendfolder:cd frontend - Install the required dependencies:
npm install - Start the frontend development server:
npm run dev
- In Terminal 2, navigate to the
-
Usage
- Open url http://localhost:5173/ to test the application.
If you find any difficulty or problem while set, please contact me at 'akshat1226@gmail.com'
Important Note: While I’ve included the .env files in this repository for your convenience during installation, I am aware that pushing sensitive information (such as API keys or credentials) to a public GitHub repository is generally not recommended. But I have done this only for your convenience.
Here is the overview of the features of the project.
Login page: User can login using registered email and password.
If the user is not registered then, he/she can register using signup page.
After successful login User will be redirected to the home page where one can see all the posts created by other users and marked as active.
On clicking the "Add post" button on Home page, user can create a post by filling the details like title, content, featured image and status.
The "Edit" and "Delete" buttons appears only to the owner of the post. The post page is given below, which have post, comments and add comment feature.
Here's a breakdown of your website's architecture
Frontend: Built with React.js, Tailwind CSS, and JavaScript. This layer handles user interactions, rendering the UI (user interface), and sending requests to the backend API. Backend API: Built with Express.js and Node.js. This layer processes user requests, interacts with the database, and generates responses. Database: MongoDB stores user data (authentication), post information, and comments. Cloud Storage: Cloudinary stores uploaded post thumbnails securely and efficiently. JWT Authentication: Ensures secure user access by issuing tokens after successful login.
User Interaction: User interacts with the frontend (e.g., creating a post, commenting). Frontend Request: Frontend sends a request to the backend API with relevant data (e.g., post content, comment text, etc.). API Processing: Backend API validates the request, fetches data from the database (if needed), performs operations like creating posts or comments, and interacts with Cloudinary for uploads. Database Interaction: The API interacts with MongoDB to store or retrieve data. Cloud Storage Interaction: The API interacts with Cloudinary to upload/download post thumbnails. API Response: The API sends a response back to the frontend with the requested data or success/error messages. Frontend Update: The frontend updates the UI based on the API response (e.g., displays new post, confirms comment creation).
| Frontend | Backend | Database | Cloud Storage |
|---|---|---|---|
| HTML | JavaScript | MongoDB | Cloudinary |
| CSS | Express.js | ||
| JavaScript | Mongoose | ||
| React.js | json web token | ||
| Tailwind CSS |
- Integrated JWT authentication for secure user access and privacy.
- Used Cloudinary for efficient and secure post thumbnail uploads, ensuring seamless streaming and storage.
- Leveraged MongoDB aggregation pipelines for optimized data retrieval and manipulation, enhancing overall platform performance.
- Implimented Tiny MCE Rich text editor for to generate posts and comments with rich text.
JavaScript: Essential for adding interactivity and dynamic content to web pages. Its versatility makes it a core part of both client-side and server-side development.
React.js: A powerful JavaScript library for building user interfaces, especially single-page applications. React's component-based architecture allows for reusable components and efficient updates, enhancing development speed and user experience.
JavaScript (Node.js): Using JavaScript on the backend with Node.js allows for a unified language across the entire application, simplifying development and maintenance.
Express.js: A minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. Its simplicity and performance make it a great choice for building APIs and web servers.
Mongoose: An elegant MongoDB object modeling tool designed to work in an asynchronous environment. It simplifies data validation, casting, and business logic, making it easier to work with MongoDB.
MongoDB: A NoSQL database that offers high performance, high availability, and easy scalability. Its flexible schema design aligns well with agile development practices, allowing for rapid iteration and adaptation to changing requirements.
Cloudinary: A comprehensive cloud-based image and video management solution. It offers powerful APIs for uploading, transforming, and delivering media assets efficiently, making it ideal for modern web applications that require dynamic media content.