/flexibble

Flexibble: A 70% Dribbble Clone – Showcase, Discover, Connect!

Primary LanguageTypeScript

Flexibble - A Dribbble Clone (70% Replica)

Welcome to Flexibble, a web application inspired by Dribbble, designed to bring designers and creatives together to showcase, explore, and connect. Flexibble replicates key features of Dribbble while incorporating modern technologies for an enhanced user experience.

Technologies Used

Flexibble is built using a stack of cutting-edge technologies:

  • Tailwind CSS: A utility-first CSS framework for streamlined styling.
  • Headless UI: Utilized for advanced components like comboboxes and dropdowns.
  • Cloudinary: For efficient storage and delivery of images and media.
  • JSON Web Tokens (JWT): Provides secure user authentication and authorization.
  • graphql-request: A simplified GraphQL client for fetching data.
  • NextAuth.js: Powering user authentication and session management.
  • Grafbase: For an efficient and scalable database solution.

Features

  • Project Creation: Share your creativity by creating projects with images, titles, descriptions, URLs, and categories.
  • Project Discovery: Explore a world of creativity by discovering projects shared by other users. Filter projects by category to find what inspires you most.
  • Profile Page: Customize your profile, showcase your portfolio of projects, and connect with other creatives.
  • User Authentication: Secure user registration and login using JWT and NextAuth.
  • Shot Upload: Share your creative work with image uploads.

Getting Started

To get started with Flexibble, follow these steps:

  1. Clone the repository: git clone https://github.com/yourusername/flexibble.git
  2. Install dependencies: npm install or yarn install
  3. Set up authentication: Configure NextAuth with your Google and GitHub credentials.
  4. Launch the development server: npm run dev or yarn dev
  5. Access Flexibble in your browser: http://localhost:3000

Usage

  1. Sign in using your Google or GitHub credentials.
  2. Create and share your design projects.
  3. Explore a variety of projects by other creatives.
  4. Filter projects by category to find what interests you.
  5. Customize your profile and build your design portfolio.

Contributing

We welcome contributions from the community to make Flexibble even better. To get involved, please read our Contribution Guidelines.

License

Flexibble is licensed under the MIT License. Feel free to explore, modify, and share as per the terms of the license.

Contact

If you have any questions, feedback, or need assistance, you can reach us at [your@email.com].

Let's unleash creativity together with Flexibble!

In this README.md file, be sure to replace the placeholders with actual information specific to your project, such as the technologies used, authentication setup, and contact details. Additionally, you should include your project logo by replacing link-to-your-logo.png with the actual path to your logo image.

This README provides an overview of your project, how to get started, how to use it, how to contribute, and licensing information. It's a helpful resource for both potential users and contributors.