AlohaGracefulCode 💻 🖥️

Elevate Your Coding Experience with Grace and Aloha 🌺

Developed By Grace Chen Abudi 👩🏽‍💻

📣 Overview:

• AlohaGracefulCode 💻 🖥️
• Elevate Your Coding Experience with Grace and Aloha 🌺
  • 📣 Overview:
  • 🔎 Intro:
  • 🧰 Tech Stack:
  • 🛠 Techniques & Tools:
  • 🎯 Roadmap
    • Phase 1: 🏗️ Foundation
    • Phase 2: Enhancements
• ✨ Live Project:
• ✨ Instructions on How to Get Started:
  • 1. Familiarize yourself with the project
  • 2. Set Up Your Development Environment
  • 3. Understand the Codebase
  • 4. Identify Areas for Contribution
  • 5. Start Contributing
  • 6. Submit Your Contribution
  • 7. Engage with the Community
  • 8. Stay Updated

🔎 Intro:

Welcome to AlohaGracefulCode, a coding challenge platform that combines the artistry of elegant problem-solving with the warm embrace of the Aloha spirit. This platform combines the precision of coding with the beauty of thoughtful problem-solving, creating a space where developers of all levels can flourish. This is a LeetCode-inspired coding challenge platform.

🧰 Tech Stack:

Client:

• Next.js
• React
• React-Toastify:
  • Allows you to add notifications to your application with ease.
  • For more info on React-Toastify, Click 👉🏽HERE
• TypeScript
• TailwindCSS

Server:

• Firebase

Cloud:

• FireStore:
  • Cloud Firestore is a NoSQL document database that lets you easily store, sync, and query data for your web apps and mobile - at global scale.

Deployment:

• Vercel

🛠 Techniques & Tools:

• Hooks + Custom Hooks
• RecoilJS:
  • RecoilJS is a state management framework for React.
  • For more info on RecoilJS, Click 👉🏽HERE
• atoms
• Mock Problems
• Youtube Modals
• SplitJS:
  • SplitJS is a library of utilities for resizable split views.
  • For more info on Split.js, Click 👉🏽HERE
• CodeMirror:
  • CodeMirror is a web-based code editor component designed to integrate seamlessly into websites, offering a versatile test input field with extensive editing capabilities. It features a robust API, enabling developers to easily extend and customize functionality.
  • For more info on CodeMirror, Click 👉🏽HERE
  • For the Npm package, Click 👉🏽HERE
  • For CodeMirror for React 👉🏽HERE
• Firestore Transactions:
  • Transaction is a set of read and write operations on one or more documents.
• React Confetti

---

🎯 Roadmap

Phase 1: 🏗️ Foundation

1. Platform Setup:

• Set up the core infrastructure for AlohaGracefulCode.
• Implement user auth modals functionality.
• Implement user authentication and account management.

2. User Interface Development:

• Create the main navigation components, including the preference navigation.
• Develop a responsive layout for the application using CSS frameworks.

3. Problem Challenges:

• Populate the platform with a diverse set of coding challenges.
• Categorize problems based on difficulty, topics, and tags.

4. Interactive Coding Environment:

• Develop an intuitive coding environment for users to solve problems.
• Create an interactive workspace with playground and code editor features.
• Fetch the problems data dynamically.

5. User Profiles:

• Create user profiles to track individual progress and achievements.
• Create user accounts in the database.

---

Phase 2: Enhancements

1. Full-Screen Mode:

• Enhance the coding environment by implementing a full-screen mode feature.
• Ensure that the full-screen functionality works seamlessly across different browsers.

2. Settings Management:

• Implement a settings modal to allow users to customize their experience such as theme selection, notification preferences, etc.
• Integrate the settings functionality with the preference navigation.

3. Problem Submission and Feedback:

• Allow users to submit their solutions to the coding challenges.
• Implement a feedback mechanism for users to receive hints or solutions.

---

✨ Live Project:

• Visit the live platform at 👉🏽 HERE !

Enjoy! 🌺

---

✨ Instructions on How to Get Started:

1. Familiarize yourself with the project

• Read the Overview:
  • Understand the purpose and vision of this project as a coding challenge platform.
• Explore the Tech Stack:
  • Review the technologies used in the project, including:
    • Client: Next.js, React, TypeScript, TailwindCSS
    • Server: Firebase
    • Cloud: Firestore

2. Set Up Your Development Environment

• Clone the Repository:
  • Use git to clone the project repository to your local machine.

       git clone https://github.com/Chen-Abudi/AlohaGracefulCode

• Install Dependencies:
  • Navigate to the project directory and install the necessary packages.

        cd alohaGracefulCode
        npm install

• Set Up Firebase:
  • Create a Firebase project and configure Firestore.
  • Update the project with your Firebase configuration details.

3. Understand the Codebase

• Review the Code Structure:

  • Familiarize yourself with the folder structure and key components of the application.

• Explore Existing Features:

  • Look through the implemented features in the project to understand how they work.

4. Identify Areas for Contribution

• Check the Roadmap:

  • Review the roadmap phases (Foundation, Enhancements, Expansion, Optimization) to identify areas where you can contribute.

• Look for Open Issues:

  • Check if there is an issue in the issues section of the repository for any tasks or bugs that need attention.

5. Start Contributing

• Create a New Branch:
  • Before making changes, create a new branch for your feature or fix.

        git checkout -b your-feature-branch

• Make Your Changes:

  • Implement your feature or fix the identified issue.

• Test Your Changes:

  • Ensure that your changes work as expected and do not break existing functionality.

6. Submit Your Contribution

• Commit Your Changes:
  • Commit your changes with a clear and descriptive message.

        git add .
        git commit -m "Description of your changes"

• Push Your Branch:
  • Push your branch to the remote repository.

        git push origin your-feature-branch

• Create a Pull Request:
  • Navigate to the repository on GitHub and create a pull request (PR) from your branch to the main branch.
  • Provide a detailed description of your changes and why they are beneficial.

7. Engage with the Community

• Participate in Discussions:

  • Engage with other contributors and maintainers in discussions related to your PR or other project topics.

• Provide Feedback:

  • Review and provide feedback on other contributors' pull requests to foster a collaborative environment.

8. Stay Updated

• Follow Project Updates:
  • Keep an eye on the project for updates, new features, and community discussions.

Thank you for your interest in contributing to AlohaGracefulCode! Your contributions make a difference! Enjoy 🌺🤙🏽