Skip to content

==> Building Blog App with TypeScript + HTML + CSS + (Node-Express-MongoDB Back-End) + Netlify Hosting + User Authentication (a mobile-friendly)

Notifications You must be signed in to change notification settings

saddamarbaa/blog-app-typescript

Repository files navigation

Blog Post Website

A blog platform built from scratch, featuring a front-end with HTML, CSS, JavaScript, and TypeScript, and a REST API back-end using Node.js, Express, MongoDB, TypeScript, and JWT authentication. This project includes complete user authentication and an admin panel for managing posts.

API Repository

Technologies

Client-Side:

  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • Netlify (Hosting)

Server-Side:

  • Node.js
  • Express
  • MongoDB
  • TypeScript
  • JSON Web Token (JWT)
  • bcryptjs
  • Heroku (Hosting)

Features

User Features:

  • Full user authentication (sign up, login, and logout)
  • View and explore all blog posts
  • Access detailed views of individual posts
  • Create a new user account (Signup)
  • Securely log into your account (Login)
  • Log out and terminate user session (Logout)
  • Refresh authentication token for continuous access
  • Permanently remove user account
  • View and update user profile information
  • Upload a profile picture
  • Verify user email for account security
  • Modify user profile settings and details
  • Recover account access with Forgot Password feature
  • Reset password securely after request

Admin Features:

  • Admin authorization for full access
  • Add new posts
  • Update existing posts
  • Delete posts

Related Projects

Blog Platform Built with React, Next.js, Node.js, MongoDB, TypeScript


Screenshots

Software Requirements

https://docs.google.com/document/d/1lZvacY90Yo19QcnJxRJyy1AAZkTi0Vi5qXHTtptqAiU/edit

image

Business Requirements

image

Technical Requirements

image

User Flow

https://app.diagrams.net/#G1DYvf-0FWMjC2nDzFbvAgbJ03Zg8DLfRZ

image

Blog App: Wireframe

https://app.diagrams.net/#G1Wo8rd6DVJUyCwp7aC6kLpvMkBM3Mgh8l

Rresponsive on large screens(Home Page)

image

Responsive on mobile and tablet screens

image

Post detail page

image

Edit new post page

image

Edit post page

image

Login Page

image

image

image

Register page

image

image


About

==> Building Blog App with TypeScript + HTML + CSS + (Node-Express-MongoDB Back-End) + Netlify Hosting + User Authentication (a mobile-friendly)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published