Skip to content

InspiroShot is a remarkable web application, serving as a faithful Dribbble clone, powered by Next.js 13. With a focus on top-notch performance and captivating user experiences, InspiroShot recreates the magic of Dribbble.

momenqudaih/inspiroshot_nextjs13-app

Repository files navigation

InspiroShot 🎨

InspiroShot is a remarkable web application that faithfully emulates the essence of Dribbble, powered by Next.js 13. With an unwavering commitment to outstanding performance and captivating user experiences, InspiroShot brings the magic of Dribbble to life.

InspiroShot Screenshot

Features ✨

  • Google Authentication: Users can conveniently sign up and sign in using their Google accounts.

  • Project Management: Users have the ability to create, delete, and update their projects, allowing for full project lifecycle control.

  • Intuitive Navigation: Users can seamlessly navigate between various project categories from the homepage.

  • Detailed Project View: Users can explore projects in detail, accessing additional information and discovering related projects.

  • User Profiles: Users can showcase their profiles and explore profiles of other users, gaining insight into their projects.

Technologies Used 🚀

  • Next.js 13: Empowering high-performance rendering and optimized client-side routing.

  • NextAuth.js: Easy authentication with a variety of providers including Google.

  • Server-Side Components: Utilize the power of server-side rendering with Server-Side Components.

  • Tailwind CSS: Styling the application with a utility-first CSS framework for rapid UI development.

  • Headless UI: Accessible and customizable UI components for building beautiful interfaces.

  • GraphQL: Efficiently managing data interactions and queries.

  • Grafbase: Leveraging the serverless GraphQL platform for seamless data management.

  • Cloudinary: Effortless image and video management in the cloud.

  • TypeScript: Ensuring type safety and robust code.

Installation 🛠️

  1. Clone this repository: git clone https://github.com/your-username/inspiroshot.git

  2. Navigate to the project directory: cd inspiroshot

  3. Install dependencies: npm install

  4. Start the development server: npm run dev

Screenshots 📷

Home Page (Before Sign In) Home page before signing in.

Home Page (After Sign In) Home page after signing in. User can see their projects and navigate.

Home Page (Menu Settings) Home page with the menu settings open. User can customize their preferences.

Home Page (Filtered Projects) Home page with filtered projects displayed based on user preferences.

Project Detail Page Project detail page with additional information and related projects.

Create Project Page Create new project page where users can submit their own designs.

Edit Project Page Edit project page for modifying existing project details.

User Profile Page User profile page displaying user information and their projects.

Usage 🎈

  1. Sign up or sign in using Google authentication.

  2. Create, delete, and update your projects.

  3. Navigate through different project categories on the homepage.

  4. Explore detailed project information and related projects.

  5. View user profiles and discover their projects.

Contributing 🤝

Contributions to InspiroShot are welcome and encouraged! If you want to contribute:

  1. Fork the repository.

  2. Create a new branch for your feature: git checkout -b feature-name

  3. Make your changes and commit them: git commit -m "Add your message here"

  4. Push to your forked repository: git push origin feature-name

  5. Create a pull request to the main repository.

Please follow the established coding guidelines and maintain consistency with the existing codebase.

Acknowledgments 🙌

We express our gratitude to the third-party libraries, frameworks, tutorials for their support in building InspiroShot.


About

InspiroShot is a remarkable web application, serving as a faithful Dribbble clone, powered by Next.js 13. With a focus on top-notch performance and captivating user experiences, InspiroShot recreates the magic of Dribbble.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published