A Modern website which accumulates crowd-sourced reviews about restaurants
A Modern website for reviewing your favorite Restaurants and checking out reviews from other customers.
The idea behind building this website is to get a good understanding of developing a fully functional Full stack application using Next.js framework and MongoDB as a backend database.
This application is built using all the new Next.js 13 features and also features TypeScript which makes everything just better!
I use Clerk for authentication which I feel makes setting up auth for your Next.js projects a breeze.
- Tailwind design and Framer-motion animations
- Fully Responsive
- Clerk Authentication (Email, Google, 9+ Social Logins)
- Client form validation and handling using react-hook-form & zod
- Server error handling using react-toast
- Page loading state
- How to write POST, DELETE, and GET routes in route handlers (app/api)
- How to fetch data in server react components by directly accessing database (WITHOUT API! like Magic!)
- How to handle relations between Server and Child components!
- How to reuse layouts
- Folder structure in Next 13 App Router
- Sample About and Contact page that can be expanded as required
Node version 18.x.x
git clone https://github.com/Kaushik612/reviews.io.git
npm install
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard
DATABASE_URL=
NEXT_PUBLIC_APP_URL="http://localhost:3000"
Please read the documentation here on how to generate the API key to use Google Maps Javascript API.
https://tintef.github.io/react-google-places-autocomplete/docs/
You will then need to update the "GooglePlacesScript.tsx" file with your API key.
Add MongoDb Database (I am using Mongo Atlas)
npx prisma init
npx prisma generate
npx prisma db push
Seed Data:
I am using ChatGPT to generate seed data that will be fed to the database and I would suggest you do the same too. This saves a lot of time in creating test data and you can use this time to work on the UI development.
node lib/seed.ts
npm run dev
Distributed under the MIT License. See LICENSE for more information.
Kaushik Ravikumar - Full Stack Web Developer - Kaushik Ravikumar