📸 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.