This project is a Dribbble-inspired platform that allows developers to showcase their projects and connect with the developer community. It was built using a YouTube tutorial by JavaScript Mastery.
Welcome to the Full Stack Dribbble Clone! Developed with Next.js, Next Auth, Tailwind CSS, Cloudinary, TypeScript, JWT, GraphQL, Grafbase, and HeadlessUI, this project offers a dynamic and visually captivating experience for developers. Users can sign in with their email, upload project details, including images, titles, and descriptions, explore other developers' profiles, and easily sort through projects by category. With secure authentication, responsive design, and GraphQL-powered data retrieval, this application encapsulates the core elements of a modern developer portfolio and collaboration platform.
⭐ Note: The database may become inactive if the app is not used for a while. If this happens, please contact me and I will reactivate the database.
- To get started, clone the repository or download the zip file.
- Install the dependencies by running the following command in the terminal:
npm install
- Create a .env file in the root directory and add the following environment variables:
NEXT_PUBLIC_GRAFBASE_API_URL
NEXT_PUBLIC_GRAFBASE_API_KEY
GOOGLE_CLIENT_ID
GOOGLE_CLIENT_SECRET
NEXTAUTH_URL
CLOUDINARY_NAME
CLOUDINARY_KEY
CLOUDINARY_SECRET
- Create a .env file in the grafbase directory and add the following environment variables:
NEXTAUTH_SECRET
- Run the development server by running the following command in the terminal:
npm run dev
- Open http://localhost:3000 with your browser to see the project.
⭐ Note: The project may require some additional configuration to run properly. Please refer to the youtube tutorial for more information.
This project includes the following features:
- User registration and authentication using NextAuth
- Project upload with images, titles, and descriptions
- Developer profile pages with project portfolios
- Project category sorting and filtering
- GraphQL-powered data retrieval for efficient querying
- Responsive and visually appealing UI using Tailwind CSS and HeadlessUI
- Next.js
- NextAuth.js
- TypeScript
- JWT (JSON Web Tokens)
- GraphQL
- Grafbase
- Cloudinary
- Tailwind CSS
- HeadlessUI
- Vercel
If you'd like to contribute to this project, please fork the repository and submit a pull request.
This project is licensed under the MIT License.