Back to Projects
Dream Words
Wallpaper & quote sharing full stack platform with OTP auth, admin dashboard, likes, reports, dark mode, JWT security and shareable URLs.
Technologies
Next.jsNode.jsMongoDBJWT
The Wallpaper & Quote Sharing Web App is a MERN stack project built with Next.js for server-side rendering and performance optimization. It allows users to browse and share aesthetic wallpapers and quotes without requiring login, while offering extended features for authenticated users and administrators.
MongoDB: Used for storing user data, posts, likes, and reports. Provides flexible schema design and scalability.
Express.js: Serves as the backend framework handling APIs, authentication, and admin operations.
Next.js: Used as the frontend framework to support server-side rendering, routing, and dynamic rendering for better performance and SEO.
Node.js: Executes backend operations like OTP handling, authentication, and API routing using JavaScript runtime.
Tailwind CSS: Handles responsive styling and modern UI components efficiently.
JWT: Used for secure user session handling and protected routes.
Cloudinary: Integrated for efficient and scalable image upload and hosting.
Nodemailer: Handles OTP and password reset email delivery to ensure secure authentication.
MongoDB: Used for storing user data, posts, likes, and reports. Provides flexible schema design and scalability.
Express.js: Serves as the backend framework handling APIs, authentication, and admin operations.
Next.js: Used as the frontend framework to support server-side rendering, routing, and dynamic rendering for better performance and SEO.
Node.js: Executes backend operations like OTP handling, authentication, and API routing using JavaScript runtime.
Tailwind CSS: Handles responsive styling and modern UI components efficiently.
JWT: Used for secure user session handling and protected routes.
Cloudinary: Integrated for efficient and scalable image upload and hosting.
Nodemailer: Handles OTP and password reset email delivery to ensure secure authentication.
Features Overview
Public Access (No Login Required)
- Fully responsive, mobile-first UI using Tailwind CSS.
- Light/Dark mode toggle for theme customization.
- Real-time feedback using Toastify notifications.
- Browse publicly available wallpapers and quotes.
- Each post has a unique shareable URL.
- Open Graph meta tags for rich social media previews.
- Like system without login using local storage.
- Like counts are synced with the database.
Logged-In Users
- OTP-based email verification for signup.
- JWT-based secure login and route access.
- Password reset with secure email link or in-session method.
- Create posts with images and optional quotes.
- Edit or delete own posts (image is immutable).
- Like/unlike posts with sync between local storage and DB.
- Report inappropriate posts for moderation.
Admin Dashboard
- Google Analytics integration for traffic insights.
- Manage users (delete accounts, update roles).
- View, suspend, or resolve reported posts.
- Suspend posts (hide from public) without deleting.
- Cannot delete posts (ensures content transparency).
- Role-based admin access protected via JWT.
What I Learned
Public Features
- Implemented a fully responsive design using Tailwind CSS.
- Integrated light/dark theme toggle with persistence.
- Enabled like system without login using local storage.
- Used Open Graph meta tags for social sharing previews.
- Real-time notifications via Toastify for better UX.
- Libraries Used: Tailwind CSS, React Toastify.
User Authentication
- Implemented OTP-based email verification on signup.
- Used bcrypt for password hashing and validation.
- JWT used for session management and route protection.
- Enabled password reset via email link or logged-in flow.
- Libraries Used: Nodemailer, bcryptjs, jsonwebtoken.
Post Creation & Management
- Users can upload images and optional quotes.
- Image uploads are immutable; text content can be edited.
- Users can delete only their own posts.
- Used Cloudinary for image hosting and storage.
- Libraries Used: Cloudinary, Multer, fs, Axios, React.js.
Likes System
- Developed like/unlike system using localStorage for guests.
- Synced likes with MongoDB for authenticated users.
- Ensured consistent experience across sessions.
- Libraries Used: React.js, localStorage API, Axios.
Reporting System
- Implemented post reporting feature visible to admins.
- Users can report posts for inappropriate content.
- Admins can suspend posts instead of deleting.
- Admins can delete only resolved or invalid reports.
- Libraries Used: React.js, Axios, Express.js.
Admin Dashboard & Role Control
- Admins can manage users, roles, and reports.
- Google Analytics integration for traffic insights.
- Role-based access control enforced using JWT.
- Libraries Used: React.js, Google Analytics API, jsonwebtoken.
State Management & Routing
- Used React Hooks (useState, useEffect) for managing UI state.
- Next.js used for SSR and optimized performance.
- Implemented protected routes using middleware.
- Libraries Used: React.js, Next.js, Axios, jsonwebtoken.
Security & Best Practices
- Passwords and OTPs are hashed using bcrypt.
- JWTs are securely stored and validated for every request.
- Ensured protected routes for user and admin access.
- Libraries Used: bcryptjs, jsonwebtoken, cookie-parser.
UI/UX and Styling
- Designed a modern UI using Tailwind CSS.
- Implemented dark/light mode toggle with smooth transitions.
- Toast notifications for success, error, and info messages.
- Libraries Used: Tailwind CSS, Toastify.