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
• Tech Stack
• Dependencies
• How To Setup
• Reference Links
• Directory Structure
• Claim an Issue
• Communication
• License
• Contribution Guidelines
• Mentors
• 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 <forked-repo-link>.
• 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

  npm install
  npm start

🔗 Reference Links:

🗺️ Starters

• Download and install the latest version of Git.
• Set your username in Git.
• Set your commit email address in Git.
• Setup Nodejs

🚀 React

• React official Documentation
• React JS Crash Course
• React Hooks Detailed

🎨 Tailwind CSS

• Tailwind Components
• Tailwind Cheat Sheet
• Official Docs
• Tailwind CSS Crash Course

🎨 Antd

• Official Docs

Useful Links from Backend

• Backend Repo
• API Documentation

📁 Directory Structure:

.
├── 🧾 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 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 channel. We will be happy to help you out.

🛡️ License

This project is licensed under the MIT License - see the 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

• 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
   discordID: bhupesh6726

2. Vatsal Bhuva
   Just an ordinary guy
   githubID: 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.