Dribble Clone

This repository contains a Dribble clone built with Next.js, TypeScript, and Grafbase. The Dribble Clone is a web application that allows users to discover, share, and interact with design inspiration and resources.

Features

  • User Authentication: Users can sign up, log in, and manage their profiles.
  • Explore Designs: Users can browse through a collection of design inspirations and resources.
  • Upload Designs: Users can upload their own designs to share with the community.
  • Like and Comment: Users can like and comment on designs to provide feedback and engage with other users.
  • Follow Users: Users can follow their favorite designers to stay updated with their latest work.
  • Search and Filters: Users can search for specific designs or apply filters to find inspirations based on categories, tags, or popularity.

Technologies Used

  • Next.js: A React framework for building server-side rendered and static websites.
  • TypeScript: A statically typed superset of JavaScript that enhances code reliability and maintainability.
  • Grafbase: A powerful design database for storing and retrieving design assets and information.
  • CSS Modules: Local scoped CSS stylesheets to ensure style encapsulation and prevent class name conflicts.
  • Axios: A promise-based HTTP client for making API requests to the backend server.
  • React Query: A data-fetching library that provides caching, refetching, and optimistic updates for seamless user experiences.

Installation

  1. Clone this repository to your local machine.

    git clone https://github.com/your-username/dribble-clone.git
    
  2. Navigate to the project directory.

    cd dribble-clone
    
  3. Install the dependencies.

    npm install
    
  4. Set up the environment variables.

    • Create a .env.local file in the root directory.
    • Add the required environment variables, such as database credentials and API keys.
  5. Start the development server.

    npm run dev
    
  6. Open your browser and visit http://localhost:3000 to see the Dribble Clone in action.

Contribution

Contributions to this project are welcome! If you have any suggestions, bug reports, or feature requests, please open an issue on the GitHub repository.

To contribute code:

  1. Fork the repository.
  2. Create a new branch for your feature or bug fix.
  3. Make your changes and commit them with descriptive commit messages.
  4. Push your changes to your forked repository.
  5. Open a pull request, describing the changes you've made.

Please ensure that your code adheres to the existing coding style and follows best practices.

License

This project is licensed under the MIT License. Feel free to use, modify, and distribute the code as per the terms of the license.

Acknowledgements

  • This project was inspired by the Dribbble design community (https://dribbble.com).
  • Special thanks to the creators and contributors of Next.js, TypeScript, and Grafbase for their amazing tools and frameworks.

Contact

If you have any questions or inquiries, feel free to contact the project maintainer at your-email@example.com.