Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/opencodeiiita/grepit-frontend
A dynamic trivia platform for mastering bash commands, HTML tags, JS keywords, and more!
https://github.com/opencodeiiita/grepit-frontend
antd opencode23 reactjs tailwind
Last synced: 2 days ago
JSON representation
A dynamic trivia platform for mastering bash commands, HTML tags, JS keywords, and more!
- Host: GitHub
- URL: https://github.com/opencodeiiita/grepit-frontend
- Owner: opencodeiiita
- License: mit
- Created: 2023-12-08T12:22:43.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-11T20:00:10.000Z (12 months ago)
- Last Synced: 2024-05-29T22:38:44.165Z (7 months ago)
- Topics: antd, opencode23, reactjs, tailwind
- Language: JavaScript
- Homepage: https://grep-it-frontend-omega.vercel.app/
- Size: 1.08 MB
- Stars: 6
- Watchers: 3
- Forks: 19
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# GrepIt-Frontend
Frontend for dynamic trivia platform to compete with you buddies with quizes! Challenge yourself, compete with others, and customize your learning experience.
## π Table Of Contents
- [Features](#π-features)
- [Tech Stack](#β‘-tech-stack)
- [Dependencies](#π¦-dependencies)
- [How To Setup](#π οΈ-how-to-setup)
- [Reference Links](#π-reference-links)
- [Directory Structure](#π-directory-structure)
- [Claim an Issue](#π-claim-an-issue)
- [Communication](#π»-communication)
- [License](#π‘οΈ-license)
- [Contribution Guidelines](#π-contribution-guidelines)
- [Mentors](#π€-mentors)
- [Thanks to all Contributors](#πͺ-thanks-to-all-contributors)## π Features:
- Engage in multiple-choice questions related to bash commands, HTML tags, JS keywords, and more.
- Track your progress and compete for a spot on the leaderboard.
- Your personal high-score will be recorded, allowing you to monitor your improvement over time.
- Provides a stress-free and fun learning environment.
- Helps you enhance your understanding of these topics.## β‘ Tech Stack:
- Node.js (v20.5.0)
- React.js
- Material-UI## π¦ Dependencies:
You need npm/yarn installed in your local machine in order to run this app.
## π οΈ How To Setup
- Make sure your machine is having internet connection.
- Fork the repository.
- Open shell (which ever your OS support) on your PC.
- Change drive to the location where you want your project to be copied.
- Clone it to your local setup by using command `git clone `.
- Once cloned, Run the following command in the root directory of the project `npm install`.
- Make sure you have required enviornment variables saved in the `.env` file in the root of the project. A file `.env.example` is attached for reference.
- After the process is completed, run the command `npm start`.
- The website will be live on `localhost:7777`.> [!TIP]
> To change port number for the developement of this project for mac users. Kindly refer to this article:
https://blog.stackademic.com/how-to-change-the-default-port-number-in-react-react-tips-1a957b54759e```bash
npm install
npm start
```## π Reference Links:
### πΊοΈ Starters
- [Download and install the latest version of Git.](https://git-scm.com/downloads)
- [Set your username in Git.](https://help.github.com/articles/setting-your-username-in-git)
- [Set your commit email address in Git.](https://help.github.com/articles/setting-your-commit-email-address-in-git)
- [Setup Nodejs](https://nodejs.org/en/blog/release/v16.18.1/)### π React
- [React official Documentation](https://react.dev/learn)
- [React JS Crash Course](https://youtu.be/w7ejDZ8SWv8?si=wGvhGzbJeEp-Sjv5)
- [React Hooks Detailed](https://www.youtube.com/playlist?list=PLC3y8-rFHvwisvxhZ135pogtX7_Oe3Q3A)### π¨ Tailwind CSS
- [Tailwind Components](https://www.material-tailwind.com/docs/react/collapse)
- [Tailwind Cheat Sheet](https://nerdcave.com/tailwind-cheat-sheet)
- [Official Docs](https://tailwindcss.com/docs/installation)
- [Tailwind CSS Crash Course](https://youtu.be/UBOj6rqRUME?si=iKI5kUFD0WgP4cL7)### π¨ Antd
- [Official Docs](https://ant.design/components/overview)
### Useful Links from Backend
- [Backend Repo](https://github.com/opencodeiiita/GrepIt-Backend/)
- [API Documentation](https://github.com/opencodeiiita/GrepIt-Backend/blob/main/API_ENDPOINTS.md)## π Directory Structure:
```bash
.
βββ π§Ύ package.json
βββ π§Ύ package-lock.json
βββ βΉοΈ README.md
βββ π public
β βββ π index.html
β βββ πΌοΈ favicon.ico
βββ π src
βββ π assets
βΒ Β βββ π images
β Β βββ π styles
β βββ π index.css
β βββ π App.css
βββ π components
β βββ π WelcomeCard.jsx
βββ π pages
β βββ π CreateRoom.jsx
β βββ π Quiz.jsx
β βββ π Home.jsx
βββ π services(api)
βββ π utils
βββ π hooks
βββ π routers
β βββ π AppRouter.jsx
βββ π App.jsx
βββ π index.js
```> [!NOTE]
> While adding new files, it is suggested entry here. It will be helpful to new contributors. Make use of chatGPT π## π Claim an issue:
- Comment on the issue. In case of no activity on the issue even after 2 days, the issue will be reassigned. If you have difficulty approaching the issue, feel free to ask on our discord channel.
- Be a champ & don't hesitate if you don't know, just learn on the way and complete it.
- It is also requested to make your entry in [CONTRIBUTORS](CONTRIBUTORS.md) markdown file before submitting the PR.
## π» Communication:
Whether you are working on a new feature or facing a doubt please feel free to ask us on our [discord](https://discord.gg/D9999YTkS8) channel. We will be happy to help you out.
## π‘οΈ License
This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.
## π Contribution Guidelines:
Please help us follow the best practice to make it easy for the reviewer as well as the contributor. We want to focus on the code quality more than on managing pull request ethics.
- People before code: If any of the following rules are violated, the pull-requests will be rejected. This is to create an easy and joyful onboarding process for new programmers and first-time contributors.
- Avoid commiting after opening pull request and name the commit as something meaningful, it is highly recommened to follow.
- Reference the issue numbers in the commit message if it resolves an open issue. Follow the pattern provided [here](.github/PULL_REQUEST_TEMPLATE.md)
- Provide relevant screenshot/short video for easier review.
- Pull Request older than 3 days with no response from the contributor shall be marked closed.
- Avoid duplicate PRs, if need be comment on the older PR with the PR number of the follow-up (new PR) and close the obsolete PR yourself.
- Be polite: Be polite to other community members.
## π€ Mentors
1. **Bhupesh Dewangan**
*Opencode Bot Developer*
*The YT demonstrator guy ;-;*
`githubID:` [bhupesh98](https://github.com/bhupesh98)
`discordID:` bhupesh67262. **Vatsal Bhuva**
*Just an ordinary guy*
`githubID:` [VatsalBhuva11](https://github.com/VatsalBhuva11)
`discordID:` vbx11## πͺ Thanks To All Contributors
All the upcoming contributor's github profile image will be displayed here, pick up the best one real quick.