AestheticAxis 🎨

AestheticAxis is an interactive quiz application that helps users discover their unique aesthetic style. By answering a series of questions, users can explore various aesthetic categories and find the one that resonates most with their personal taste.

🌟 Features

• Interactive quiz with slider-based questions
• Multiple aesthetic categories (e.g., goth, cottagecore, cyberpunk)
• Dynamic progress bar
• Personalized results based on user responses
• Responsive design for various devices
• User authentication and profile management
• Animated UI components for enhanced user experience
• Data visualization of quiz results

🛠️ Built With

• React - JavaScript library for building user interfaces
• Next.js - React framework for production
• TypeScript - Typed superset of JavaScript
• Chakra UI - Component library for building accessible React applications
• Tailwind CSS - Utility-first CSS framework
• Firebase - Backend-as-a-Service platform
• Framer Motion - Animation library for React
• React Spring - Spring-physics based animation library
• Plotly.js - Graphing library
• TSParticles - Particle animation library
• React Icon Cloud - Icon cloud component for React

🚀 Getting Started

Prerequisites

• Node.js 14.x or later
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/boshyxd/aesthetic-axis.git
   cd aesthetic-axis

2. Install dependencies:

   npm install
   # or
   yarn install

3. Set up environment variables: Create a .env.local file in the root directory and add the following variables:

   NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
   NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
   NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
   NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
   NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
   NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your_measurement_id
   

4. Run the development server:

   npm run dev
   # or
   yarn dev

5. Open http://localhost:3000 in your browser to see the application.

📚 Project Structure

• src/pages: Contains the main pages of the application
• src/components: Reusable React components
• src/hooks: Custom React hooks
• src/styles: Global styles and CSS modules
• src/firebase: Firebase configuration and utility functions
• src/data: Static data used in the application

🧪 Testing

To run the tests, use the following command:

npm run test
# or
yarn test

🚀 Deployment

This project is set up for deployment on GitHub Pages. The deployment process is automated using GitHub Actions. When you push to the main branch, the workflow defined in .github/workflows/nextjs.yml will build and deploy the application.

📚 Learn More

To learn more about the technologies used in this project, check out the following resources:

• Next.js Documentation
• Chakra UI Documentation
• Tailwind CSS Documentation
• Firebase Documentation
• Framer Motion Documentation

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Please ensure your code follows the project's coding standards and includes appropriate tests.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Inspired by various online aesthetic quizzes and style guides
• Thanks to all contributors and users of AestheticAxis
• Special thanks to the open-source community for the amazing tools and libraries used in this project

---

Made with ❤️ by boshyxd