Coder Social home page Coder Social logo

a-padhy / quiz-app Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 124 KB

A web application that lets users to register and login and learn a language that they want. They can give exercises on each language, view their score as well as view the leaderboard. They can also track their progress for different languages.

Home Page: https://quiz-app-client-six.vercel.app/

JavaScript 99.28% HTML 0.62% CSS 0.10%

quiz-app's Introduction

Language Quiz Application - MERN Stack

Live Site URL : Quizzy

Video Demo

Video : Demo

This project is a full-stack web application built using React for the frontend and Express.js with MongoDB for the backend. The frontend uses various packages such as React-Axios, React-Router-Dom and React-Cookie to create a sign-up page and login page, a home page with Language selection and leaderboard features. The language selection feature enables the user to choose the language about which they want to give the test. Each language has various exercises that the user has to complete. User's progress is tracked during each exercise. Upon submitting they can see how much they scored. The Homepage also features a leaderboard feature where they can see top performing users across different languages. User's progress on each language is tracked in the user profile section and can also update their language preferences.

The backend uses packages such as bcrypt, cors, jsonwebtoken and mongoose to handle user authentication, password encryption, and database operations. It checks whether the user exists before storing the user's information in the database and uses JSON web tokens for secure communication between the client and server. Entire scoring logic is handled at the backend.

To use the application, users must first sign up with their email and password. Once signed in, they can choose language, attend exercises, see scores, check leaderboard, check their progress as well as upadte language preference. The application also provides a logout button to ensure the user's privacy and security.

##Testing For now only exercises for language English has been added.

Installation

To run this project, you'll need to have Node.js and MongoDB installed on your system. You can download Node.js from the official website: https://nodejs.org/, and install MongoDB by following the instructions provided here: https://docs.mongodb.com/manual/installation/.

To install the project dependencies, follow these steps:

Clone the repository to your local machine using the following command:

bash Copy code git clone https://github.com/your-name/your-project-name.git Navigate to the project directory:

bash Copy code

cd your-project

Navigate and Install the frontend dependencies:

cd client
npm install

Start the frontend server:

npm run dev

Navigate to the backend directory:

cd server

Install the backend dependencies:

npm install

Create a .env file in the backend directory, and set the following environment variables:

makefile

MONGO_URI=<your-mongodb-url>
JWT_SECRET=<your-jwt-secret>

Replace with the URI of your MongoDB database, and with a secret key of your choice.

Start the backend server:

npm run dev

Open a new terminal window, navigate to the project directory, and start the frontend server:

npm run start

Open your web browser and navigate to http://localhost:3000 to view the application.

That's it! You should now be able to run the application locally. If you encounter any issues, please refer to the project documentation or create a new issue on the project's GitHub repository.

quiz-app's People

Contributors

a-padhy avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.