Skip to content

Full-Stack Web Progressive Application using the PERN stack (PostgreSQL, Express, React, and Node.js.)

Notifications You must be signed in to change notification settings

AntjeInTech2022/pern

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 

Repository files navigation

About

This project was part of the Code Academy Berlin Full-Stack Web Developer Bootcamp. The project consisted in building a free-of-choice Full-Stack Web Progressive Application using the PERN (PostgresSQL, Express, REACT,Node.js) stack.

  • CSS framework used: MUI

Demo:

View the demo at https://pernbuzz-5j0dqz66o-antjeintech2022.vercel.app/

Photos Copyright

All photos are from Unsplash. Unsplash is NOT associated with this website.

Fake Users Copyright

All fake users are from the Random Users Generator. The Random Users Generator is NOT associated with this website.

Learning goals:

  • Learn you how to use Node.js, Express and PostgresSQL
  • Learn how APIs are served to the client-side
  • Learn how to implement server-side logic
  • Learn how structure a relational database
  • In each Sprint working on both client and server side at the same time.
  • In addition keep improving your React skills.
  • Learn JWT (JSON Web Token) by building a Registration/Login system
  • Building a Authentication and Authorisation system for the user
  • Apply TypeScript (optional)
  • API testing with Postman

Requirements:

  • Full-Stack App (Front-End and Back-End) of your choice
  • Make it a Progressive Web App
  • Single Page Application with React JS (React Router 6)
  • use of global store (Context)
  • Use of a CSS Framework

MVP

  • Lading Screen: Screen showing title and logo of your App
  • List Screen: Screen showing result of your API list endpoint, logged in users can create new items
  • Log in / Register Screen: having a registration / login feature by email and password
  • Profile Screen: Display user informations, user can edit his own information (optional)
  • Details Screen: Screen showing details according to the the id of the element, showing comments, having a 'Like/Unlike' button, logged in users can edit or delete their own content (optional)

Additional features implemented:

  • uuid-ossp extension for PostgresSQL: applying universally unique identifiers (UUIDs) for the user id's
  • Logged in users can:
    • edit their profile
    • save other users to their contacts
    • send messages to other users
    • see their sent messages and messages received