Writely is a modern, feature-rich blogging platform that empowers users to create, publish, and interact with high-quality content. Built with a sleek UI and comprehensive text editing capabilities, Writely offers an immersive writing and reading experience. The platform combines powerful article management tools with social features to create a vibrant community of writers and readers.

Home Page

Home Page (Continued)

Article Page

Sign In Page

Sign Up Page

User Profile

User Profile (Continued)

Settings Page

• Rich Text Editor: Advanced editing with Jodit integration
• Article Publishing: Support for tags and categories
• Deletion Management: Article removal with confirmation flow

• Modern UI/UX: Elegant animations with AOS library
• Responsive Design: Optimized for all device sizes
• Loading Skeletons: Enhanced perceived performance
• Theme Support: Toggle between dark and light modes

• Custom Profiles: Personalized avatars and bio sections
• Contribution Tracking: Article history with heatmap visualization
• Writer Analytics: Author statistics (streaks, active periods)
• Account Security: Email verification system

• Community Engagement: Comprehensive commenting system
• Article Metrics: Read time, comment counts, and popularity tracking
• Network Building: User following capabilities
• Content Discovery: Explore trending and popular tags

• Secure Rendering: Sanitized HTML with DOMPurify
• Markdown Support: Write in markdown or rich text
• Code Highlighting: Syntax highlighting for code blocks

• Core: React.js (v18.3.1), Vite (v5.3.1)
• Routing: React Router v6 (v6.24.1)
• State Management: React Query (v5.51.5), Valtio (v1.13.2)
• Styling: Tailwind CSS (v3.4.13), MUI Components (v6.1.2), Emotion (v11.13.3)

• Server: Node.js, Express
• Database: MongoDB with Mongoose ODM
• Authentication: JWT, Bcrypt
• Media Storage: Cloudinary
• Email: Nodemailer
• File Handling: Multer
• Scheduling: Node-cron

• Rich Text: Jodit React (v5.2.5)
• Icons: Lucide React (v0.477.0), React Icons (v5.2.1)
• Animations: AOS (Animate On Scroll), Lottie React (v2.4.1), Typed.js (v2.1.0)
• Form Handling: Formik (v2.4.6), Yup validation (v1.5.0)
• Security: DOMPurify (v3.2.4)
• Utilities: Axios (v1.7.2), Lodash-es (v4.17.21), Classnames (v2.5.1)

• Node.js (v14+)
• npm or yarn
• Git
• MongoDB instance (local or Atlas)
• Cloudinary account (for image uploads)
• Gmail account (for email verification)

1. Clone the repository

git clone https://github.com/your-username/Writely.git
cd Blogging-website-Frontend

2. Install dependencies

npm install

3. Environment setup - Create a .env file:

VITE_API_URL=your_backend_api_url
VITE_GITHUB_TOKEN=your_github_token

4. Start development server

npm run dev

5. Build for production

npm run build

1. Navigate to backend directory:

cd Blogging-website-Backend

2. Install dependencies

npm install

3. Create a .env file with these variables:

PORT=3000
DATABASE_URI=your_mongodb_connection_string
ACCESS_TOKEN_SECRET=your_jwt_secret_key
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret
EMAIL=your_gmail_address
EMAIL_PASSWORD=your_gmail_app_password
FRONTEND_URL=your_frontend_url

1. Start the server:

npm run server

blogging-website/
├── public/             # Static files
├── src/
│   ├── assets/         # Images, icons, animations
│   ├── components/     # Reusable components
│   ├── hooks/          # Custom React hooks
│   ├── pages/          # Main application pages
│   ├── App.jsx         # Main application component
│   ├── constants.js    # Application constants
│   └── main.jsx        # Application entry point
├── .env                # Environment variables
└── vite.config.js      # Vite configuration

Blogging-website-Backend/
├── api/                # API entry point
├── config/             # Configuration files
├── controllers/        # Request handlers
├── middleware/         # Custom middleware
├── models/             # Database models
├── routes/             # API routes
├── uploads/            # Temporary upload directory
└── utils/              # Utility functions

The Editor component uses Formik for form state management and JoditField for rich text editing.

• CORS configuration restricts domain access
• JWT verification middleware protects authenticated routes
• Password hashing ensures secure credential storage
• Input validation prevents malicious data

1. User registers with email, username, and password
2. Verification email is sent via Nodemailer
3. User verifies email by clicking the link
4. User logs in and receives JWT token
5. Token is used for authenticated API requests

Jadamal Sangeetha Choudhary

This project is licensed under the MIT License - see the LICENSE file for details.

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

Give a ⭐️ if this project helped you!