Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/saulkurosaki/dribbble-clone-project

This is a Full-Stack Complete and Device Responsive Dribbble App Clone Project called: Flexibble, developed with NextJs14, Typescript, TailwindCss, HeadlessUi, ShadcnUi, Cloudinary, Clerk and MongoDB to practice my Developer skills
https://github.com/saulkurosaki/dribbble-clone-project

clerk clerkauth cloudinary headlessui mongodb mongoose nextjs nextjs14 nextjs14-typescript shadcn-ui tailwindcss typescript

Last synced: 4 days ago
JSON representation

This is a Full-Stack Complete and Device Responsive Dribbble App Clone Project called: Flexibble, developed with NextJs14, Typescript, TailwindCss, HeadlessUi, ShadcnUi, Cloudinary, Clerk and MongoDB to practice my Developer skills

Awesome Lists containing this project

README

        

# DRIBBBLE CLONE PROJECT

## ⚙️ Tech Stack

- Next.js
- Next Auth
- TypeScript
- JSON Web Token
- GraphQL
- Grafbase
- Cloudinary
- Tailwind CSS
- Headless UI

## 🔋 Features

👉 **Modern Design Home Page**: Features a clean and modern design resembling Dribbble, with a visually appealing interface showcasing project previews and navigation.

👉 **Browsing and Pagination**: Browse different projects, filter them by category, and experience smooth pagination for seamless data exploration.

👉 **Authentication & Authorization System**: A fully functional authentication and authorization system allows users to log in securely using JWT and Google authentication.

👉 **Create Post Page**: Provides a dedicated space for users to share their projects with the community. It includes fields for project details, images, and other relevant information.

👉 **Project Details and Related Projects**: A detailed view with related projects functionality, enabling users to explore more projects within the same category or theme.

👉 **Edit and Re-upload Images**: Users have the capability to edit previously created projects, including the ability to re-upload images from their devices to the cloud for updates.

👉 **Delete Projects**: The delete functionality simplifies project removal with a one-click process, streamlining the user experience.

👉 **Portfolio-Style User Profile Page**: The user profile page adopts a portfolio-style layout, displaying the user's projects along with the project profiles of other users for easy exploration.

👉 **Backend API Routes**: Backend API routes for handling JWT token management for secure authentication and image uploading, supporting seamless integration with the frontend.

and many more, including code architecture and reusability

##

![alt text](<1-Flexibble - Google Chrome 20_02_2024 03_55_20 p. m..png>)
![alt text](<2-Flexibble - Google Chrome 20_02_2024 03_55_47 p. m..png>)
![alt text](<3-Flexibble - Google Chrome 20_02_2024 03_55_47 p. m..png>)
![alt text](<4-Flexibble - Google Chrome 20_02_2024 03_59_09 p. m..png>)
![alt text](<5-Flexibble - Google Chrome 20_02_2024 03_59_29 p. m..png>)
![alt text](<6-Flexibble - Google Chrome 20_02_2024 03_59_38 p. m..png>)
![alt text](<7-Flexibble - Google Chrome 20_02_2024 03_59_45 p. m..png>)
![alt text](<8-Flexibble - Google Chrome 20_02_2024 03_59_57 p. m..png>)
![alt text](<9-Flexibble - Google Chrome 20_02_2024 04_00_02 p. m..png>)
![alt text](<10-Flexibble - Google Chrome 20_02_2024 04_00_15 p. m..png>)
![alt text](<11-Flexibble - Google Chrome 20_02_2024 04_00_21 p. m..png>)
![alt text](<12-Flexibble - Google Chrome 20_02_2024 04_00_35 p. m..png>)
![alt text](<13-Flexibble - Google Chrome 20_02_2024 04_00_40 p. m..png>)
![alt text](<14-Flexibble - Google Chrome 20_02_2024 04_00_51 p. m..png>)
![alt text](<15-Flexibble - Google Chrome 20_02_2024 04_01_08 p. m..png>)
![alt text](<16-Flexibble - Google Chrome 20_02_2024 04_01_18 p. m..png>)
![alt text](<17-Flexibble - Google Chrome 20_02_2024 04_01_25 p. m..png>)
![alt text](<18-Flexibble - Google Chrome 20_02_2024 04_01_36 p. m..png>)
![alt text](<19-Flexibble - Google Chrome 20_02_2024 04_01_41 p. m..png>)
![alt text](<20-Flexibble - Google Chrome 20_02_2024 04_01_45 p. m..png>)
![alt text](<21-Flexibble - Google Chrome 20_02_2024 04_01_55 p. m..png>)
![alt text](<22-Flexibble - Google Chrome 20_02_2024 04_02_09 p. m..png>)
![alt text](<23-Flexibble - Google Chrome 20_02_2024 04_02_17 p. m..png>)
![alt text](<24-Flexibble - Google Chrome 20_02_2024 04_02_32 p. m..png>)
![alt text](<25-Flexibble - Google Chrome 20_02_2024 04_02_54 p. m..png>)