https://github.com/chen-abudi/alohagracefulcode
Welcome to AlohaGracefulCode, your go-to platform for mastering coding challenges and enhancing your programming skills!
https://github.com/chen-abudi/alohagracefulcode
customhooks firebase firebase-firestore javascipt nextjs reactjs recoiljs tailwindcss typescript
Last synced: 2 months ago
JSON representation
Welcome to AlohaGracefulCode, your go-to platform for mastering coding challenges and enhancing your programming skills!
- Host: GitHub
- URL: https://github.com/chen-abudi/alohagracefulcode
- Owner: Chen-Abudi
- Created: 2023-11-19T10:15:50.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-07-27T14:48:41.000Z (2 months ago)
- Last Synced: 2025-07-27T16:44:21.512Z (2 months ago)
- Topics: customhooks, firebase, firebase-firestore, javascipt, nextjs, reactjs, recoiljs, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://aloha-graceful-code.vercel.app
- Size: 575 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# AlohaGracefulCode 💻 🖥️
> Elevate Your Coding Experience with Grace and Aloha 🌺
**Developed By Grace Chen Abudi** 👩🏽💻
# ✨ Live Project:
👇🏽 `To visit the platform - Click on the badge demo live`
[](https://aloha-graceful-code.vercel.app/)
[](https://github.com/Chen-Abudi/AlohaGracefulCode/stargazers)
## 📣 Overview:
- [AlohaGracefulCode 💻 🖥️](#alohagracefulcode--️)
- [✨ Live Project:](#-live-project)
- [📣 Overview:](#-overview)
- [🔎 Intro:](#-intro)
- [🧰 Tech Stack:](#-tech-stack)
- [🛠 Techniques \& Tools:](#-techniques--tools)
- [🏁 Instructions on How to Get Started:](#-instructions-on-how-to-get-started)
- [Prerequisites](#prerequisites)
- [1. `Familiarize yourself with the project`](#1-familiarize-yourself-with-the-project)
- [2. `Set Up Your Development Environment`](#2-set-up-your-development-environment)
- [3. `Understand the Codebase`](#3-understand-the-codebase)
- [4. `Identify Areas for Contribution`](#4-identify-areas-for-contribution)
- [5. `Start Contributing`](#5-start-contributing)
- [6. `Submit Your Contribution`](#6-submit-your-contribution)
- [7. `Engage with the Community`](#7-engage-with-the-community)
## 🔎 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**](https://www.npmjs.com/package/react-toastify)
- 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**](https://recoiljs.org/)
- atoms
- Mock Problems
- Youtube Modals
- `SplitJS:`
- **SplitJS** is a library of utilities for resizable split views.
- For more info on **Split.js**, Click [**👉🏽HERE**](https://split.js.org/)
- `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**](https://codemirror.net/)
- For the Npm package, Click [**👉🏽HERE**](https://www.npmjs.com/package/codemirror)
- For **CodeMirror for React** [**👉🏽HERE**](https://uiwjs.github.io/react-codemirror/)
- `Firestore Transactions`:
- **Transaction** is a set of read and write operations on one or more documents.
- **React Confetti**
---
# 🏁 Instructions on How to Get Started:
### Prerequisites
- Node.js ≥16
- Firebase account
- Yarn/NPM
### 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.
```bash
git clone https://github.com/Chen-Abudi/AlohaGracefulCode
```
- **Install Dependencies:**
- Navigate to the project directory and install the necessary packages.
```bash
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.
```bash
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.
```bash
git add .
git commit -m "Description of your changes"
```
- **Push Your Branch:**
- Push your branch to the remote repository.
```bash
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.
**_Thank you for your interest in contributing to AlohaGracefulCode! Your contributions make a difference! Enjoy 🌺🤙🏽_**