A Blogging WriteWave Web App

• Configuration and Setup
• Key Features
• Technologies used
  • Frontend
  • Backend
  • Database
• 📸 Screenshots

Configuration and Setup

In order to run this project locally, simply fork and clone the repository or download as zip and unzip on your machine.

• Open the project in your prefered code editor.
• Go to terminal -> New terminal (If you are using VS code)
• Split your terminal into two (run the Frontend on one terminal and the Backend on the other terminal)

In the first terminal

$ cd Frontend
$ npm install (to install frontend-side dependencies)
$ npm run  start (to start the frontend)

In the second terminal

• cd Backend and Set environment variables in config.env under ./config
• Create your mongoDB connection url, which you'll use as your MONGO_URI
• Supply the following credentials

#  ---  Config.env  ---
NODE_ENV = production
PORT =5000
URI =http://localhost:3000
MONGO_URI =
ACCESS_TOKEN_SECRET=
ACCESS_TOKEN_EXPIRY=1d
REFRESH_TOKEN_SECRET=
REFRESH_TOKEN_EXPIRY=10d
RESET_PASSWORD_EXPIRE =  
SMTP_HOST = "smtp.gmail.com"
SMTP_PORT = 
SMTP_USERNAME = 
SMTP_PASSWORD =
SMTP_FROM_EMAIL = 
CONTACT_US_EMAIL =
FRONTEND_URL=http://localhost:5173

# --- Terminal ---
$ npm install (to install backend-side dependencies)
$ npm start (to start the backend)

Key Features

• User registration and login
• Authentication using JWT Tokens
• CRUD operations (Blog create, read, update and delete)
• Upload user ımages and blog ımages to the server
• Liking blog and Comment on blog
• Toast loading effect
• Responsive Design

Technologies used

This project was created using the following technologies.

Frontend

• React js - JavaScript library that is used for building user interfaces specifically for single-page applications
• React Hooks - For managing and centralizing application state
• react-router-dom - To handle routing
• axios - For making Api calls
• Tailwind CSS - For User Interface
• CK-Editor - Rich Text Editor
• React icons - Small library that helps you add icons to your react apps.

Backend

• Node js -A runtime environment to help build fast server applications using JS
• Express js -The server for handling and routing HTTP requests
• Mongoose - For modeling and mapping MongoDB data to JavaScript
• express-async-handler - Simple middleware for handling exceptions inside of async express routes and passing them to your express error handlers
• jsonwebtoken - For authentication
• Bcryptjs - For data encryption
• Nodemailer - Send e-mails from Node.js
• Dotenv - Zero Dependency module that loads environment variables
• multer - Node.js middleware for uploading files
• slugify - For encoding titles into a URL-friendly format
• cors - Provides a Connect/Express middleware

Database

• MongoDB - It provides a free cloud service to store MongoDB collections.

Screenshots