This project is a Vite+React application developed as a personal project, which is now integrated with OTPLess Authentication System. The objective of the application is to allow users to sign in to the blog application without using passwords, just with a single sign in approval link.
- Created a React app using Vite.
- Utilized Tailwind CSS for styling.
- Integrated OTP-less authentication for seamless user login and registration. Checks if the user exists in the database; if not, it registers and logs in the user automatically.
- Users can log in to add new blog posts, read articles, and comment on posts.
- Comments are based on approval and controlled by the admin.
- Comprehensive admin panel with full access to manage users, posts, and comments.
- Admin can approve, edit, delete, or modify blog posts and comments.
- Admin has the authority to approve comments before they appear on posts.
- Users can create, edit, and format blog posts using the rich text editor powered by Tiptap Editor.
- Categories can be assigned to blog posts for easy categorization and browsing.
- Implemented Redux for efficient global state management across the application.
- Designed the front-end using Tailwind CSS and Daisy UI for a modern, mobile-first, and responsive interface.
- Built a dedicated backend server using Node.js and Express with RESTful routes for handling posts, comments, categories, and user management.
- Database management handled using MongoDB, ensuring scalability and flexibility for managing data.
- Code available on GitHub.
- Website deployed on Vercel. Link.
- Backend deployed on Digital Ocean.
To set up the project locally, follow these steps:
-
Clone the repository:
https://github.com/namanx19/Typosphere -
Navigate to the project directory:
cd <PATH_OF_DIRECTORY> -
Navigate to the client directory to run the frontend
cd client/ -
Install dependencies:
npm install -
Add a
.envfile inside /client with the following details:
VITE_BASE_URL = <SERVER_URL> Default Local Host Server URL is http://localhost:5000
-
Start the frontend client:
npm run dev -
On your browser, go to
http://localhost:5173(if your port is 5173) -
Navigate to the server directory to run the backend
cd server/ -
Install dependencies:
npm install -
Add a
.envfile inside /server with the following details:
| Key | Value |
|---|---|
| PORT | <PORT_NUMBER> |
| DB_URI | <MONGO_DB_URI> |
| JWT_SECRET | <SECRET> |
| NODE_ENV | development |
| CLIENT_SECRET | <OTPLESS_CLIENT_SECRET> |
| CLIENT_ID | <OTPLESS_CLIENT_ID> |
- Admin Panel is only accessible when you mark the user admin = true in mongo db.
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
Feel free to reach out to naman.mw4@gmail.com if you have any questions or encounter any issues while setting up or using Typosphere. Happy coding!