https://github.com/mrsmart0401/nextjs_ex6_guide
6 projects to understand Next.js core concepts, using MongoDB, Firebase and NextAuth.js.
https://github.com/mrsmart0401/nextjs_ex6_guide
firebase javascript mongodb next nextauth nextjs react reactjs shadcn-ui strapi strapi-cms tailwind tailwindcss xstate
Last synced: 3 months ago
JSON representation
6 projects to understand Next.js core concepts, using MongoDB, Firebase and NextAuth.js.
- Host: GitHub
- URL: https://github.com/mrsmart0401/nextjs_ex6_guide
- Owner: MrSmart0401
- Created: 2024-03-27T05:54:07.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-27T06:04:57.000Z (over 2 years ago)
- Last Synced: 2026-01-03T15:31:13.299Z (6 months ago)
- Topics: firebase, javascript, mongodb, next, nextauth, nextjs, react, reactjs, shadcn-ui, strapi, strapi-cms, tailwind, tailwindcss, xstate
- Language: JavaScript
- Homepage:
- Size: 12.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next.js Projects
6 projects to understand Next.js core concepts, using MongoDB, Firebase and NextAuth.js.
| # | Project | Description |
| --- | ---------------------------------- | ------------------------------------------------------------------------------------------------- |
| 01 | [**NextEvents**](#nextevents) | A social networking site using Next.js, MongoDB and Firebase. |
| 02 | [**Blog**](#blog) | A complete app example with a blog using Next.js, MongoDB, Markdown and React Syntax Highlighter. |
| 03 | [**Dashboard**](#dashboard) | A very simple dashboard to understand authentication with NextAuth.js. |
| 04 | [**React Meetups**](#reactmeetups) | Another social networking site to summarize Next.js core concepts. |
| 05 | [**DJ Events**](#djevents) | A music event website using Strapi CMS as backend. |
| 06 | [**DevSpace**](#devspace) | Another blog using Tailwind CSS and Markdown. |
A social networking site using Next.js, MongoDB and Firebase.
[See Demo deployed on Vercel](https://nextevents.vercel.app/)
[See 01-nextevents folder](01-nextevents)
### Features
- working with file-based routing and handling dynamic routes.
- creating a general layout, adding React components and styling them with CSS modules.
- displaying events and filtering them by date.
- adding Static Site Generation (SSG) on the home page.
- fetching events from Firebase and enabling page pre-rendering for dynamic pages.
- using Server-Side Rendering (SSR) and client-side data fetching with SWR.
- adding metadata with Head.
- customizing the \_app.js and \_document.js files.
- optimizing images with Image.
- handling comments and signups for the newsletter with API routes.
- setting up a MongoDB database and getting comments for a specific event.
- handling errors and displaying user-friendly notifications.
- deploying on Vercel.
A complete app example with a blog using Next.js, MongoDB, Markdown and React Syntax Highlighter.
[See Demo deployed on Vercel](https://next-dagny.vercel.app/)
[See 02-blog folder](02-blog)
### Features
- building the home page, creating a general layout and a reusable grid to display the latest posts.
- reading markdown files and rendering posts as JSX with gray-matter and react-markdown.
- displaying dynamic post pages and generating paths.
- optimizing images from markdown with Image.
- rendering code snippets from markdown and optimizing React Syntax Highlighter bundle size.
- handling messages sent by users via an API route.
- storing messages in a database with MongoDB.
- adding metadata in Head and customizing \_document.js file.
- using React portals to show user-friendly notifications.
- deploying on Vercel.
A very simple dashboard to understand authentication with NextAuth.js.
[See 03-dashboard folder](03-dashboard)
### Features
- adding a user signup API route and sending signup requests from the frontend.
- hashing passwords with Bcryptjs.
- working with a custom auth provider in NextAuth.js to log in users.
- managing active sessions and handling logouts.
- protecting routes with client-side and server-side page guards.
- protecting API routes.
- enabling users to change their passwords.
Another social networking site to summarize Next.js core concepts.
[See 04-reactmeetups folder](04-reactmeetups)
### Features
- converting a React project into a Next.js app.
- handling server-side rendering of pages with getStaticProps and getStaticPaths.
- connecting and querying a MongoDB Database via an API route.
- getting data from the database for page pre-rendering.
- working with fallback pages and revalidation to display new meetups without having to rebuild.
A music event website using Strapi CMS as backend.
[See Demo deployed on Vercel](https://next-djevents-strapi.vercel.app/)
[See Strapi API deployed on Railway](https://next-projects-production.up.railway.app/events)
[See 05-djevents folder](05-djevents)
### Features
- creating a Next.js app with a custom layout.
- handling module aliases with jsconfig.
- fetching data with API routes, displaying events and event details.
- setting up Strapi CMS and defining event content type.
- hosting uploaded images on Cloudinary.
- connecting to the Strapi API, filtering events, enabling search and pagination.
- adding, editing and deleting event.
- creating a slug and displaying user-friendly messages with React Toastify.
- handling image upload with a modal using React Portal.
- authenticating users, storing JWT token in server HttpOnly cookie.
- registering users and creating an auth context.
- protecting Strapi API routes and customizing user events endpoint.
- creating a user dashboard and associating events with users.
- guarding routes to add, edit, delete event and upload image.
- displaying maps with MapQuest Geocoding API, Mapbox and ReactMapGL.
- deploying Strapi backend on Railway.
- deploying frontend on Vercel.
Another blog using Tailwind CSS and Markdown.
[See 06-devspace folder](06-devspace)
### Features
- setting up [Tailwind CSS](https://tailwindcss.com/docs/guides/nextjs) with Next.js.
- getting markdown files and parsing frontmatter with gray-matter.
- displaying single blog posts with Marked.
- handling pagination and creating category pages.
- displaying a category sidebar.
- handling searches with an API route.
- [caching posts](https://medium.com/@matswainson/building-a-search-component-for-your-next-js-markdown-blog-9e75e0e7d210) on each commit with Husky.
This repository is based on 2 courses:
- [Next.js & React - The Complete Guide](https://www.udemy.com/course/nextjs-react-the-complete-guide/) by Maximilian Schwarzmüller (2021)
- [Next.js Dev to Deployment](https://www.udemy.com/course/nextjs-dev-to-deployment/) by Brad Traversy (2021)