SpeakX Questions Application

A full-stack application for managing and displaying different types of questions including MCQs, Anagrams, and Read Along exercises.

Features

- Multiple question types (MCQ, Anagram, Read Along)
- Search functionality
- Real-time progress tracking
- User statistics
- Responsive design

Tech Stack

- Frontend: React, styled-components, react-query
- Backend: Node.js, Express, MongoDB
- Database: MongoDB

Prerequisites

- Node.js (v14 or higher)
- MongoDB (v4 or higher)
- npm or yarn

Project Structure

speakx/ ├── client/ # React frontend │ ├── public/ │ ├── src/ │ │ ├── components/ # React components │ │ ├── services/ # API services │ │ ├── styles/ # Global styles │ │ └── App.js # Main app component │ └── package.json ├── server/ # Node.js backend │ ├── src/ │ │ ├── models/ # Database models │ │ ├── routes/ # API routes │ │ └── index.js # Server entry point │ └── package.json └── package.json # Root package.json

Installation

1. Clone the Repository bash git clone https://github.com/yourusername/speakx.git cd speakx

2. Install Dependencies bash Install root dependencies npm install Install all dependencies (client and server) npm run install:all

3. Environment Setup Create .env files in both client and server directories: For server (server/.env): env PORT=3001 MONGODB_URI=mongodb://localhost:27017/speakx NODE_ENV=development

For client (client/.env): env REACT_APP_API_URL=http://localhost:3001/api

Database Setup

1. Start MongoDB bash Start MongoDB service mongod

2. Import Sample Data bash From the server directory cd server npm run seed

Running the Application

1. Development Mode Start all services (from root directory): bash npm start

Or start services separately: Terminal 1 (MongoDB): bash mongod

2. Access the Application
   • Frontend: http://localhost:3000
   • Backend API: http://localhost:3001

API Documentation

Questions API

1. Search Questions bash POST /api/questions/search

Request body: json { "query": "string", "page": 1, "limit": 10, "type": "MCQ" }

2. Get Question by ID bash GET /api/questions/:id

Response Formats

1. MCQ Question json { "type": "MCQ", "title": "Question text", "options": [ { "text": "Option 1", "isCorrectAnswer": true } ] }

2. Anagram Question json { "type": "ANAGRAM", "anagramType": "WORD", "blocks": [ { "text": "A",

Troubleshooting

Common Issues

1. MongoDB Connection Error bash Check MongoDB status mongo --eval "db.serverStatus()" Verify MongoDB service is running mongod

2. Node Modules Issues bash Clear node_modules and reinstall rm -rf node_modules npm cache clean --force npm install

3. Port Conflicts

   • Check if ports 3000 or 3001 are in use
   • Modify ports in .env files if needed

Error Messages

1. "Error loading questions":

   • Check if the backend server is running
   • Verify MongoDB connection
   • Check browser console for specific errors

2. "MongoDB Connection Error":

   • Verify MongoDB is running
   • Check MONGODB_URI in server/.env
   • Ensure MongoDB port (27017) is available

Contributing

1. Fork the repository

2. Create your feature branch bash git checkout -b feature/AmazingFeature

3. Commit your changes bash git commit -m 'Add some AmazingFeature'

4. Push to the branch bash git push origin feature/AmazingFeature

5. Open a Pull Request

Scripts

json { "start": "Starts both client and server", "install:all": "Installs all dependencies", "start:client": "Starts React client", "start:server": "Starts Node.js server" }

Development Tools

• MongoDB Compass - GUI for MongoDB
• Postman - API testing
• React Developer Tools - Browser extension
• Redux DevTools - State management debugging

License

This project is licensed under the MIT License - see the LICENSE file for details.