https://github.com/ushiradineth/clonegram

An Instagram clone made with NextJS, TypeScript, Prisma, NextAuth, tRPC, Zod and TailwindCSS. Database and storage on Supabase. Hosted on Vercel
https://github.com/ushiradineth/clonegram

next-auth nextjs prisma react tailwindcss trpc typescript zod

Last synced: about 2 months ago
JSON representation

An Instagram clone made with NextJS, TypeScript, Prisma, NextAuth, tRPC, Zod and TailwindCSS. Database and storage on Supabase. Hosted on Vercel

• Host: GitHub
• URL: https://github.com/ushiradineth/clonegram
• Owner: ushiradineth
• Created: 2022-12-07T15:22:35.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-02-12T17:36:09.000Z (11 months ago)
• Last Synced: 2024-04-18T09:43:26.919Z (9 months ago)
• Topics: next-auth, nextjs, prisma, react, tailwindcss, trpc, typescript, zod
• Language: TypeScript
• Homepage: https://clonegram.ushira.com
• Size: 461 KB
• Stars: 6
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 📸 Clonegram

An Instagram clone made to learn Next.js.

## 📦 Technologies

- `Next.js`

- `TypeScript`

- `NextAuth`

- `PostgreSQL`

- `Prisma`

- `tRPC`

- `Tailwind CSS`

- `Zod`

- `Vercel`

- `Supabase`

## 📚 Features

Here's what you can do with Clonegram:

- **Upload Image**: Users can upload a single or collection of images, with the option to crop and scale the images.

- **Community Features**: Users can interact with the community using comments and likes, and follow each other.

- **Search**: Users can search for all existing users, unless they are blocked.

- **Block users**: Users are able to block other users.

- **SSO**: Users can use passwordless login using Email, Google or Github.

## 👩🏽‍🍳 The Process

I started this project as a way to learn everything, literally.

I realised that I learn when I create and work instead of trying to just learn a technology, so I took `Next.js` and the technologies and build an app with what I learn everyday by tackling bugs.

I spent three months of nonstop development for this application, in the end I was able to use this project to get an internship :]

## 📚 What I Learned

During this project, I got my entry into a lot of concepts when it comes with software engineers, frontend and backend concepts. It was my first time using all the technologies mentioned above.

## 💭 How can it be improved?

- Refactoring a lot of code and issues, especially user context management.

- Add pagination for home and explore pages.

- Add stories.

- Update dark mode with a better color scheme.

- Refactoring the UI with newer components.

- Fixing a bunch of issues that are seen in the mobile view related to z-index.

## 🚦 Running the Project

To run the project in your local environment, follow these steps:

1. Clone the repository to your local machine.

2. Run `yarn` in the project directory to install the required dependencies.

3. Run `yarn dev` to get the project running, but you are required to provide the necessary enviorment variables.