Giter VIP home page Giter VIP logo

masterbulla / mongodb-react-express-node-fullstack-techblogsite Goto Github PK

View Code? Open in Web Editor NEW

This project forked from pramit-marattha/mongodb-react-express-node-fullstack-techblogsite

0.0 1.0 0.0 9.7 MB

(W.I.P) * ๐Ÿ›  Fullstack Blogsite built using React/Nextjs as a frontend , express js (backend framework) and MongoDB as a database.Also, implemented various features like form validation ,user authentication(signup and login functionalities) ,separate user profiles, reset password, forgot password and much more.

JavaScript 75.37% CSS 24.63%

mongodb-react-express-node-fullstack-techblogsite's Introduction

Fullstack-MERN-Blogsite

Fullstack Blogsite built using React as a frontend , express js (backend framework) and MongoDB as a database.Also, implemented various features like form validation ,user authentication(signup and login functionalities) ,separate user profiles, reset password, forgot password and much more.

Current Progress

under construction

landingPage

login

register

drawing

drawing

drawing


Step By Step Build: Entire commit History

Starter (server setup & client Setup)

Commit History Source File
Fullstack Mern blogsite Source File
Commit History Source File
salt hashed and shortid added Source File
Merge branch into main Source File
shortid implemented Source File
authenticated login and implemented jwt token Source File
nextjs installation Source File
bootstrapcdn reactstrap nextconfig and _document.js updated Source File
importing react Source File
Merge branch 'main' into main Source File
login and register page added and navbar updated with respective links Source File
login and register page added and navbar updated with respective links Source File
login and register page added and navbar updated with respective links Source File
signup form created Source File
register actions and register alert notification added Source File
login actions and login alert notification added Source File
storing user information and token keys inside cookie and localStorage Source File
commit history updated Source File
clearing token and localstorage after logging out & conditionally hiding and showing signout button after authentication Source File
redirecting isAuthenticated user back to home page if they try to access login and register page Source File
readme commit history updated Source File
Adding authentication as well as admin middlewares Source File
Adding authentication as well as admin middlewares Source File
creating seperate dashboard for user and admin Source File
segregate and protect routes for both user and admin Source File
Adding dashboard link for both admin and user in navigation header Source File
creating categorySchema model and category controller in the backend Source File
Handling errors and avoiding duplicate category Source File
creating,listing,reading and deleting category Source File
creating tagSchema model and tag controller and handling errors and avoiding duplicate tag in the backend Source File
Implementing a slim progress bar at the top of the header using nprogress npm package Source File
styling nprogress and adding some material icons Source File
created new category-tag page for updating category as well as tags source File
creating categories from the client side Source File
creating removing categories from the client side Source File
creating,removing tags from the client side Source File
created a blog schema model on server Source File
updating blog routes Source File
created the entire blog controller Source file
creating a meta description by stripping html tags from body by using cli-strip-html package Source File
Integrating categories and tags inside blog Source File
Blog component created Source File
created blog actions Source File
created blog form and embeded with react-quill a rich text editor Source File
Adding react-quill modules and event handlers and also implenting localStorage Source File
displaying categories and tag list in the blog form Source File
toggle categories Source File
updated blog validation and implemented blog publishing functionality Source File
displaying error message and success message Source File
created boglists route to list all the blogs in the backend Source File
listing all categories ,blogs and tags Source File
list , read and remove blog functionality added in the backend Source File
created controller for updating the blog in the backend Source File
created controller to show blog photo Source File
blog route added on the header and seperate blog page is created Source File
Server side rendering blogs pages by using nextjs inbuilt lifecycle method called getInitialProps Source File
display all categories and taglists on the blog page Source File
Showing image on the individual blog post Source File
Lisiting and displaying all the categories and taglists inside blog page Source File
Adding head section for the blogs Source File
load more option added Source File
displaying single specific blogs Source File
styling single page blog Source File
created head section for single blog for better search engine optimization Source File
showing realted blogs by creating blogListRelated routes and controller Source File
created related blog on the client side Source File
list of blogs for admin Source File
deleting blogs from the client side Source File
update blog page setup Source File
Merge branch 'main' of https://github.com/pramit-marattha/Fullstack-MERN-Blogsite into main Source File
home page created/updated Source File

mongodb-react-express-node-fullstack-techblogsite's People

Contributors

pramit-marattha avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.