A application using basic CRUD operations , MySQL , authentication and authorization.
- Features
- Tools and Technologies
- Dependencies
- Dev-dependencies
- Prerequisites
- Installation and setup
- Backend API
- frontend pages
- npm scripts
- Useful Links
- Signup
- Login
- Logout
- Add Post
- Similar Posts
- View Post
- Update Post
- Delete Post
- Form validations in frontend and backend
- Token based Authentication
- Use of 404 page for wrong urls
- Relevant redirects
- Use of layout component for pages
- Use of various React hooks
- Routes protection
- Use of different HTTP status codes for sending responses
- Standard pratices followed
- HTML
- CSS
- Javascript
- Node.js
- Express.js
- React
- Context-API
- MySQL
Following are the major dependencies of the project:
- axios
- react
- react-dom
- react-router-dom
- sass
- bcrypt
- dotenv
- cors
- dotenv
- express
- jsonwebtoken
- mysql
Following are the major dev-dependencies of the project:
- nodemon
- Node.js must be installed on the system.
- You should have a mySQL database.
- You should have a code editor (preferred: VS Code)
-
Install all the dependencies
npm run install-all
-
Create a file named ".env" inside the backend folder. Add data from .env.example file and substitute your credentials there.
-
Start the application
npm run dev
-
Go to http://localhost:3000
- POST /api/auth/register - POST /api/auth/login - GET /api/posts - POST /api/posts - GET /api/posts/:postId - PUT /api/posts/:postId - DELETE /api/tasks/:postId
- / Home Screen (Public home page for guests and private dashboard (tasks) for logged-in users) - /register Signup page - /login Login page - /write Add new post - /post/postId post Details - /write/?edit=2 update a post
At root:
npm run dev
: Starts both backend and frontendnpm run dev-server
: Starts only backendnpm run dev-client
: Starts only frontendnpm run install-all
: Installs all dependencies and dev-dependencies required at root, at frontend and at backend.
Inside frontend folder:
npm start
: Starts frontend in development modenpm run build
: Builds the frontend for production to the build foldernpm test
: Launches the test runner in the interactive watch modenpm run eject
: This will remove the single build dependency from the frontend.
Inside backend folder:
npm run dev
: Starts backend using nodemon.npm start
: Starts backend without nodemon.
-
This project
- Github Repo: https://github.com/sachinsingh3232/BlogApp
-
Official Docs
- Reactjs docs: https://reactjs.org/docs/getting-started.html
- npmjs docs: https://docs.npmjs.com/
- Mongodb docs: https://docs.mongodb.com/manual/introduction/
- Github docs: https://docs.github.com/en/get-started/quickstart/hello-world