This is my college project for 2nd year. A simple blog website with WYSIWYG editor and card layout for articles and a simple SignIn/SignUp menu.
Check out the live demo to see the website in action.
A simple and elegant design with the most basic color pallet (just black and white). Both Frontend and Backend are written in JavaScript. ReactJS for front-end and NodeJS with ExpressJS for backend.
All the articles and User data (credentials) are stored in NoSQL database. I'm using MongoDB for this purpose (more specifically MongoDB atlas).
For front-end, I have created different components for every seperate design element (ReactJS) which gives it a modular design. For instance, the newsletter column (which is not functional just yet) is a different component than the list of articles below it.
For back-end, I have created two different routes for Articles and User. Both these routes use Express Router function. In the User Route, I have used BCrypt to create salted hash of the password before sending it to the cloud database.
This project includes:
- Featured Post
- Articles list (Card layout)
- Ability to sign up and log in
- WYSIWYG editor
Future prospects:
- Cookies to store User data
- JWTokens for logging in using services like Github
- Newsletter Signup
Live version:
Local machine:
- Clone the project locally.
- Run
npm install
on the root level (where you can seeserver.js
), it'll install dependencies for back-end. - Change directory to
./client
- Run
npm install again
, this time it's for front-end. - Similarly, run
npm start-dev
in the root folder/
and run justnpm start
in the./client
folder. This will start both back-end (at port5000
) and front-end (at port3000
). - After this, the website will run properly except for one thing, you won't be able to see the articles or use SignIn/SignUp features beacause it's cloudDB dependent. To fix that, you'll have to create a database at MongoDB atlas and put you API keys in
.env
file.
To report any vulnerability that you found while using the website, please send an email with the details to heikrana@pm.me . This will help me to assess the risk and take the necessary steps.
You can create an issue in this repository itself, I'll try to look into it as soon as possible.