Skip to content

Latest commit

 

History

History
68 lines (55 loc) · 2.77 KB

README.md

File metadata and controls

68 lines (55 loc) · 2.77 KB

Next.js Project with Firebase Authentication and TailwindCSS

This is a sample Next.js project bootstrapped with create-next-app, that uses Firebase for authentication and TailwindCSS for styling.

Getting Started

Install the required packages using npm or yarn:

Copy code
npm install

or

yarn Start the development server:

Copy code
npm run dev

or

yarn dev
Open http://localhost:3000 with your browser to see the app in action.

Project Details

The project uses Next.js 13 with the beta 'app' directory, and Typescript. The project includes two routes in addition to the home route. Firebase is used for authentication and data persistence. The design patterns used include Model-View-ViewModel (MVVM) and Data Access Object (DAO). Authentication, Server-side Rendering (SSR), and Client-side Rendering (CSR) are all implemented, SPA with client-side routing, Componet-based, Progressive Web App (PWA). In order to test the authentication features, you need to register and login using the navbar at the top of the app. Once you register, you are automatically logged in.

Deployment

The app is deployed on Vercel, and you can check it out (here)[https://challlenge-next.vercel.app/].

Functional Requirements met:

Analysis of requirements and results.

route /Puntos

  • The user can place colorfull points on all the screen.
  • The user can undo all the points that he/she has placed.
  • The user can redo all the points that he/she has placed.
  • The points are saved in the database.
  • The points are loaded from the database.

route /Palindromo

  • The user can enter a word and check if it is a palindrome.
  • The user can see the history of the words that he/she has entered.
  • The words are saved in the database.
  • The words are loaded from the database.
  • The can clean the word that is in the input.
  • The web app alerts the user if the is or is not a palindrome.

Lint and Prettier use

  • The project uses Lint and Prettier that were provided by the Instructor, there isn't a single error or warning in the console.

Extras

  • The web app has the ability to login and logout.
  • The web app has the ability to persist the data in the database.
  • The web app has the ability to load the data from the database.
  • The web app uses TailwindCSS for styling, NextUI for components, and Firebase for authentication and data persistence.
  • The web app is deployed on Vercel.

Full video of the project

You can check the full video of the project of me coding it (here)[https://drive.google.com/file/d/14qpbG0I8lDPhK9A59GdaHOrvXf0uwroC/view?usp=share_link].

The video is in Spanish, also I't was recorded accross the day because I had some errands to do, so the video is a bit long, but I hope you enjoy it.