Initial commit for reviews.io website

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -0,0 +1,174 @@
+<br/>
+<p align="center">
+<a href="https://github.com/Kaushik612/reviews.io">
+    <img src="images/banner-1.jpg" alt="Logo" width="80" height="80">
+  </a>
+  <h3 align="center">Reviews.io</h3>
+
+  <p align="center">
+    A Modern website which accumulates crowd-sourced reviews about restaurants
+    <br/>
+  </p>
+</p>
+
+![Forks](https://img.shields.io/github/forks/Kaushik612/reviews.io?style=social) ![Stargazers](https://img.shields.io/github/stars/Kaushik612/reviews.io?style=social) ![License](https://img.shields.io/github/license/Kaushik612/reviews.io)
+
+## Table Of Contents
+
+- [Screenshots](#screenshots)
+- [About the Project](#about-the-project)
+- [Built With](#built-with)
+- [Getting Started](#getting-started)
+  - [Prerequisites](#prerequisites)
+  - [Installation](#installation)
+- [License](#license)
+- [Authors](#authors)
+
+## Screenshots
+
+![HomePage-Dark](images/screenshots/homepage1.png)
+
+![HomePage-Light](images/screenshots/homepage-light.png)
+
+![Restaurant-Detail](images/screenshots/restaurant-detail-page.png)
+
+![Clerk-Auth](images/screenshots/clerk-auth.png)
+
+![Post-Review](images/screenshots/post-review.png)
+
+![Pagination](images/screenshots/pagination.png)
+
+![Mobile-Responsive](images/screenshots/mobile-responsive-1.png)
+
+## 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
+
+- [![Next][Next.js]][Next-url]
+- [![React][React.js]][React-url]
+- [![Tailwind][Tailwind.css]][Tailwind-url]
+- [![Typescript][Typescript]][Typescript-url]
+- [![Prisma][Prisma]][Prisma-url]
+- [![MongoDB][MongoDB]][MongoDB-url]
+
+### 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
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## Getting Started
+
+### Prerequisites
+
+**Node version 18.x.x**
+
+### Cloning the repository
+
+```shell
+git clone https://github.com/Kaushik612/reviews.io.git
+```
+
+### Install packages
+
+```sh
+npm install
+```
+
+### Setup .env file
+
+```js
+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 Prisma
+
+Add MongoDb Database (I am using Mongo Atlas)
+
+```shell
+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.
+
+```shell
+node lib/seed.ts
+```
+
+### Start the app
+
+```shell
+npm run dev
+```
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## License
+
+Distributed under the MIT License. See [LICENSE](https://github.com/Kaushik612/reviews.io/blob/main/LICENSE.md) for more information.
+
+## Authors
+
+**Kaushik Ravikumar** - _Full Stack Web Developer_ - [Kaushik Ravikumar](https://github.com/kaushik612)
+
+<!-- MARKDOWN LINKS & IMAGES -->
+<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
+
+[contributors-shield]: https://img.shields.io/github/contributors/github_username/repo_name.svg?style=for-the-badge
+[contributors-url]: https://github.com/github_username/repo_name/graphs/contributors
+[forks-shield]: https://img.shields.io/github/forks/github_username/repo_name.svg?style=for-the-badge
+[forks-url]: https://github.com/github_username/repo_name/network/members
+[stars-shield]: https://img.shields.io/github/stars/github_username/repo_name.svg?style=for-the-badge
+[stars-url]: https://github.com/github_username/repo_name/stargazers
+[issues-shield]: https://img.shields.io/github/issues/github_username/repo_name.svg?style=for-the-badge
+[issues-url]: https://github.com/github_username/repo_name/issues
+[license-shield]: https://img.shields.io/github/license/github_username/repo_name.svg?style=for-the-badge
+[license-url]: https://github.com/github_username/repo_name/blob/master/LICENSE.txt
+[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
+[linkedin-url]: https://linkedin.com/in/linkedin_username
+[product-screenshot]: images/screenshot.png
+[Next.js]: https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white
+[Next-url]: https://nextjs.org/
+[React.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
+[React-url]: https://reactjs.org/
+[Tailwind.css]: https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white
+[Tailwind-url]: https://tailwindcss.com/
+[Typescript]: https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white
+[Typescript-url]: https:/typescript.org
+[Prisma]: https://img.shields.io/badge/Prisma-3982CE?style=for-the-badge&logo=Prisma&logoColor=white
+[Prisma-url]: https:/prisma.io
+[MongoDB]: https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge&logo=mongodb&logoColor=white
+[MongoDB-url]: https:/mongodb.com

app/(auth)/(routes)/layout.tsx

@@ -0,0 +1,11 @@
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      {children}
+    </div>
+  );
+}

app/(auth)/(routes)/sign-in/[[...sign-in]]/page.tsx

@@ -0,0 +1,5 @@
+import { SignIn } from "@clerk/nextjs";
+
+export default function Page() {
+  return <SignIn />;
+}

app/(auth)/(routes)/sign-up/[[...sign-up]]/page.tsx

@@ -0,0 +1,5 @@
+import { SignUp } from "@clerk/nextjs";
+
+export default function Page() {
+  return <SignUp />;
+}

app/(links)/(routes)/about/page.tsx

@@ -0,0 +1,28 @@
+"use client";
+import React from "react";
+
+const AboutPage = () => {
+  return (
+    <section className="bg-secondary mt-5">
+      <div className="py-8 lg:py-16 px-4 mx-auto max-w-screen-md">
+        <h2 className="mb-4 text-4xl tracking-tight font-extrabold text-center text-gray-900 dark:text-white">
+          About Us
+        </h2>
+        <p className="mb-8 lg:mb-16 font-light text-center text-gray-500 dark:text-gray-400 sm:text-xl">
+          This is a sample About us page. Write your own unique story here!
+        </p>
+        <div className="flex justify-center items-center flex-wrap">
+          <p className="text-2xl md:text-3xl font-bold text-primary leading-relaxed text-center">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit
+            dolores dignissimos accusantium perferendis officia culpa voluptatem
+            labore aut! Nemo facere, similique voluptatibus nulla itaque cum
+            doloremque quidem exercitationem, vero adipisci incidunt voluptatum
+            quaerat blanditiis mollitia, provident beatae sed culpa odit?
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default AboutPage;

app/(links)/(routes)/contact/page.tsx

@@ -0,0 +1,70 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import React from "react";
+
+const ContactPage = () => {
+  return (
+    <section className="bg-secondary mt-10 md:mt-5">
+      <div className="py-8 lg:py-16 px-4 mx-auto max-w-screen-md">
+        <h2 className="mb-4 text-4xl tracking-tight font-extrabold text-center text-gray-900 dark:text-white">
+          Contact Us
+        </h2>
+        <p className="mb-8 lg:mb-16 font-light text-center text-gray-500 dark:text-gray-400 sm:text-xl">
+          Got a technical issue? Want to send feedback about a beta feature?
+          Need details about our Business plan? Let us know.
+        </p>
+        <form className="space-y-8">
+          <div>
+            <label
+              htmlFor="email"
+              className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+            >
+              Your email
+            </label>
+            <Input
+              type="email"
+              id="email"
+              className="rounded-lg p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
+              placeholder="[email protected]"
+              required
+            />
+          </div>
+          <div>
+            <label
+              htmlFor="subject"
+              className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+            >
+              Subject
+            </label>
+            <Input
+              type="text"
+              id="subject"
+              className=" dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
+              placeholder="Let us know how we can help you"
+              required
+            />
+          </div>
+          <div className="sm:col-span-2">
+            <label
+              htmlFor="message"
+              className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+            >
+              Your message
+            </label>
+            <Textarea
+              id="message"
+              rows={6}
+              className=" dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+              placeholder="Leave a comment..."
+            ></Textarea>
+          </div>
+          <Button variant={"default"}>Send Message</Button>
+        </form>
+      </div>
+    </section>
+  );
+};
+
+export default ContactPage;

app/(restaurtants)/(routes)/create/loading.tsx

@@ -0,0 +1,14 @@
+"use client";
+import React from "react";
+
+import { PuffLoader } from "react-spinners";
+
+const loading = () => {
+  return (
+    <div className="flex justify-center items-center min-h-screen">
+      <PuffLoader size={100} />
+    </div>
+  );
+};
+
+export default loading;