spatulatom/react-next-auth

Getting Started

This is a Next.js project bootstrapped with create-next-app.

'bookmark a joke' is a fullstack Next.js app - this repository contains its source code
View the deployed app on Vercel »

Table of Contents

1. About The Project
2. Built With

About The Project

• Generate a joke a save it on your account. User login/create account interface. A fullstack Next.js 12 app. Static Site Generation (SSG), Incremental Static Regeneration (ISG) for better Search Engine Optimazation (SEO) and performance. Also Server Side Rendering (SSR) in use. NextAuth for Authentication and route protection on the client and the server side. MongoDB for data storage. React Context for app wide state management. Notification for better UX when fetching data from backend APIs or external APIs.
• Tailwind is used for styling following the Tailwind for Next.js instalation: https://tailwindcss.com/docs/guides/nextjs. Some custom classes are defined in tailwind.config.js.

1. Jokes can be chosen from three different categories: Simply Funny, Speedy laugh, Don't Laugh Challenge. The initial joke on the first render is fetched on the server at a build time with SSG + ISG: getStaticProps function na revalidate property in index.js. Once the site is loaded the jokes are fetched from the client side from jokes.js component. Upon clicking on 'Save' button a joke get saved in MongoDB on the user profile. Custom notifications at the buttom of the pages about the status of the ongoing requests. Notifications are managed with React Context.

2. In the savedJokes.js jokes get fetched from MongoDB with the use of SSG and getServerSideProps function.

3. profile.js page offers a password change to the user with again custom notifications from the backend.

4. User login interface in auth.js page. Notification for better UX.

5. User create account interface also in auth.js page. Notification in use.

(back to top)

Built With

• Tailwind CSS,
• Next.js,
• Context API for global state managment,
• MongoDB for data storage,
• NextAuth.js for user authentication,
• Vercel for deployment,
• Git for version control,
• GitHub as a remote repository,
• Visual Studio Code as a local IDE & repository,
• Chrome Developer Tools for testing screen sizes and using Lighthouse,
• Chrome, Firefox, Brave Browser, Edge and Opera for browser testing the responsiveness,
• https://wave.webaim.org/ to check web accessibility,
• https://balsamiq.com/ for wireframing.

(back to top)