Reviews.io

A Modern website which accumulates crowd-sourced reviews about restaurants

Table Of Contents

• Screenshots
• About the Project
• Built With
• Getting Started
  • Prerequisites
  • Installation
• License
• Authors

Screenshots

About The Project

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.

Built With

• 
• 
• 
• 
• 
• 

Features:

• 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

(back to top)

Getting Started

Prerequisites

Node version 18.x.x

Cloning the repository

git clone https://github.com/Kaushik612/reviews.io.git

Install packages

npm install

Setup .env file

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"

Setup Google Places

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.

Setup Prisma

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

Start the app

npm run dev

(back to top)

License

Distributed under the MIT License. See LICENSE for more information.

Authors

Kaushik Ravikumar - Full Stack Web Developer - Kaushik Ravikumar