LojaOnline

This repository is the delivered code for the final project of my MBA, for the discipline Modern Web Applications. It aims to use a wide tech stack, experimenting with everything learned during the course.

Project Description:

https://github.com/murchelon/lojaonline/blob/main/_ProjectNotes/FinalProject_Description.md

Live Link:

theLink

Video from the app:

videolink

Tech Stack: Trying to use it all, as a training path:

• (DONE!) React
• (DONE!) Typescript
• (DONE!) Full responsive
• (DONE!) MVC
• (DONE!) Data fetched from an API
• (DONE!) useContext & pass state to child from parent (just to try both!)
• (DONE!) Next.js
• (DONE!) PWA
• (DONE!) JWT
• (TODO) ServiceWorker: offline mode
• (DONE!) Formik
• (DONE!) Yup
• (DONE!) Material UI components
• (DONE!) CSS-in-js (Styled Components)
• (DONE!) LocalStorage/cookies: Used nookies library to access cookies in client and server with 1 library
• (TODO) Radio to change technical features that are implemented (useState, useContext, useRedux, Redux-Saga)
• (DONE!) At least 1 screen must use Server Side Rendering (cookie checked in server side: GetServerSideProps
• (DONE!) Use Postman (to test API endpoint)
• (TODO) Blockchain! Allow login with a ETH wallet (augmenting the existing API that doesnt support it)
• (very far) Killer design or MUI Theme
• (DONE!) Cool README.md with Markdown
• (DONE!) Async/Await
• (TODO) Google Maps Integration
• (TODO) Use of GPS in mobile

Project features, that were asked:

• (DONE!) Pagination
• (DONE!) New User screen
• (DONE!) Products screen
• (DONE!) Favorites screen
• (TODO) Product Detail
• (DONE!) NavBar on top/left
• (DONE!) 100% Responsive
• (DONE!) Use Formik and Yup
• (TODO) Google Maps: Show nearby stores

Screenshots

pictures

Commands used to install all librarys. Package.json informs that, but, here I have the actual commands used.

npx create-next-app lojaonline --template typescript

npm i next-pwa

npm i --save bcryptjs jsonwebtoken npm i --save @types/bcryptjs @types/jsonwebtoken

npm i typescript @types/node ts-node nodemon

npm i @mui/material @emotion/react @emotion/styled @mui/icons-material @fontsource/roboto @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons npm i --save-dev @mui/types

npm i -S formik yup npm i --save-dev @types/yup

npm i nookies npm i --save-dev @types/cookie

npm i axios npm i --save-dev @types/axios

npm i react-toastify

npm run dev

Useful links:

https://fiap-reactjs-presencial.herokuapp.com/doc/#/

https://github.com/joserrodrigues/fiap_mba_presencial_react_trabalho_final

https://www.simicart.com/manifest-generator.html/ https://blog.avneesh.tech/how-to-create-a-pwa-with-nextjs

https://arunoda.me/blog/ssr-and-server-only-modules