feat: Full-Stack Help Center Application

README.md

@@ -4,24 +4,129 @@
 
 1. **Clone the Repository:**
    ```bash
-   git clone https://github.com/iAmritMalviya/fullstack-assignment
+   git clone https://github.com/vaibhavvatsbhartiya/fullstack-assignment.git
    cd fullstack-assignment
    ```
 
 2. **Frontend:**
-   - Create a React app in the `frontend` folder.
-   - Follow the instructions in `frontend.md` to complete the frontend.
+   - Created a React app in the `frontend` folder.
+   - Following the instructions in `frontend.md` to complete the frontend.
 
 3. **Backend:**
-   - Create a Node.js app in the `backend` folder.
-   - Follow the `backend.md` instructions to complete the backend.
+   - Created a Node.js app in the `backend` folder.
+   - Following the `backend.md` instructions to complete the backend.
 
 4. **Push Your Work:**
    - Push both the frontend and backend apps to the same repository.
-   - Make sure the repository is public.
+   - The repository is public.
 
-5. **Submit Your Work:**
-   - Paste the GitHub repository link in the Google form you received after pushing your code.
+5. **Submit My Work:**
+   - Pasted the GitHub repository link in the Google form I've received after pushing my code.
 
 ---
 
+This project is a full-stack application with a React frontend and a Node.js backend. It uses MongoDB as the database.
+
+## Project Structure
+
+### Backend
+```
+backend/
+├── config/
+│   └── database.js
+├── controllers/
+│   ├── cardController.js
+│   └── formController.js
+├── middleware/
+│   └── errorHandler.js
+├── models/
+│   ├── Card.js
+│   └── Form.js
+├── routes/
+│   ├── cardRoutes.js
+│   └── formRoutes.js
+├── .gitignore
+├── README.md
+├── package-lock.json
+├── package.json
+└── server.js
+```
+
+The backend follows a typical MVC (Model-View-Controller) structure, with separate directories for configuration, controllers, middleware, models, and routes.
+
+### Frontend
+```
+frontend/
+├── public/
+├── src/
+│   ├── components/
+│   │   ├── Card.jsx
+│   │   ├── CardList.jsx
+│   │   ├── Footer.jsx
+│   │   ├── Navbar.jsx
+│   │   ├── RequestForm.jsx
+│   │   └── SearchBar.jsx
+│   ├── hooks/
+│   │   └── useCards.js
+│   ├── services/
+│   │   └── api.js
+│   ├── App.jsx
+│   ├── index.css
+│   └── main.js
+├── .gitignore
+├── README.md
+├── eslint.config.js
+├── index.html
+├── package-lock.json
+├── package.json
+├── postcss.config.js
+├── tailwind.config.js
+└── vite.config.js
+```
+
+The frontend is built with React and uses Vite as the build tool. It includes components, custom hooks, and services for API communication.
+
+## Setup Instructions
+
+1. Clone the repository
+2. Install dependencies for both frontend and backend:
+   ```
+   cd frontend && npm install
+   cd backend && npm install
+   ```
+3. Set up environment variables:
+   - In the `backend` directory, create a `.env` file with the following content:
+     ```
+     PORT=5000
+     MONGO_URI=mongodb://your_mongodb_connection_string
+     ```
+   Replace `your_mongodb_connection_string` with your actual MongoDB connection string.
+
+4. Start the backend server:
+   ```
+   cd backend && npm start
+   ```
+
+5. Start the frontend development server:
+   ```
+   cd frontend && npm run dev
+   ```
+
+## Available Scripts
+
+In the backend directory:
+- `npm start`: Starts the server
+- `npm run dev`: Starts the server with nodemon for development
+
+In the frontend directory:
+- `npm run dev`: Starts the development server
+- `npm run build`: Builds the app for production
+- `npm run lint`: Runs ESLint
+- `npm run preview`: Previews the build locally
+
+## Technologies Used
+
+- Frontend: React, Vite, Tailwind CSS
+- Backend: Node.js, Express.js
+- Database: MongoDB
+- Other tools: ESLint, PostCSS

backend/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+
+.env

backend/README.md

@@ -0,0 +1,70 @@
+# Backend Project
+
+This project is a backend application with a structured layout for handling cards and forms. It uses MongoDB for data storage and Express.js for the server framework.
+
+## Project Structure
+
+```
+backend/
+├── config/
+│   └── database.js
+├── controllers/
+│   ├── cardController.js
+│   └── formController.js
+├── middleware/
+│   └── errorHandler.js
+├── models/
+│   ├── Card.js
+│   └── Form.js
+├── routes/
+│   ├── cardRoutes.js
+│   └── formRoutes.js
+├── .gitignore
+├── README.md
+├── package-lock.json
+├── package.json
+└── server.js
+```
+
+## Setup Instructions
+
+1. Clone the repository to your local machine.
+
+2. Install dependencies:
+   ```
+   npm install
+   ```
+
+3. Set up environment variables:
+   Create a `.env` file in the root directory and add the following:
+   ```
+   PORT=3000
+   MONGO_URI=mongodb://your_mongodb_connection_string
+   ```
+   Replace `your_mongodb_connection_string` with your actual MongoDB connection string.
+
+4. Start the server:
+   ```
+   npm start
+   ```
+
+## Environment Variables
+
+- `PORT`: The port number on which the server will run. Default is 3000.
+- `MONGO_URI`: The connection string for your MongoDB database.
+
+## Available Scripts
+
+- `npm start`: Starts the server
+- `npm run dev`: Starts the server with nodemon for development
+
+## API Endpoints
+
+- `/api/cards`: Endpoints for card operations
+- `/api/forms`: Endpoints for form operations
+
+For more detailed information about the API endpoints, please refer to the individual route files in the `routes` directory.
+
+## Error Handling
+
+Custom error handling is implemented in `middleware/errorHandler.js`.

backend/config/database.js

@@ -0,0 +1,16 @@
+const mongoose = require('mongoose');
+
+const connectDB = async () => {
+    try {
+        await mongoose.connect(process.env.MONGO_URI, {
+            useNewUrlParser: true,
+            useUnifiedTopology: true,
+        });
+        console.log('MongoDB connected');
+    } catch (error) {
+        console.error('MongoDB connection failed:', error.message);
+        process.exit(1);
+    }
+};
+
+module.exports = connectDB;

backend/controllers/cardController.js

@@ -0,0 +1,34 @@
+const Card = require('../models/Card');
+
+// Create a new card
+exports.createCard = async (req, res, next) => {
+    try {
+        const { title, description } = req.body;
+        const card = new Card({ title, description });
+        await card.save();
+        res.status(201).json(card);
+    } catch (error) {
+        next(error);
+    }
+};
+
+// Get all cards
+exports.getAllCards = async (req, res, next) => {
+    try {
+        const cards = await Card.find({});
+        res.status(200).json(cards);
+    } catch (error) {
+        next(error);
+    }
+};
+
+// Get a specific card by title
+exports.getCardByTitle = async (req, res, next) => {
+    try {
+        const card = await Card.findOne({ title: req.params.title });
+        if (!card) return res.status(404).json({ message: 'Card not found' });
+        res.status(200).json(card);
+    } catch (error) {
+        next(error);
+    }
+};

backend/controllers/formController.js

@@ -0,0 +1,33 @@
+// controllers/formController.js
+const Form = require('../models/Form');
+
+const submitForm = async (req, res) => {
+  try {
+    const { name, email, query } = req.body;
+
+    // Create a new form entry
+    const formEntry = new Form({
+      name,
+      email,
+      query
+    });
+
+    // Save the form entry to the database
+    await formEntry.save();
+
+    res.status(201).json({
+      success: true,
+      message: 'Form submitted successfully'
+    });
+  } catch (error) {
+    res.status(500).json({
+      success: false,
+      message: 'Error submitting form',
+      error: error.message
+    });
+  }
+};
+
+module.exports = {
+  submitForm
+};

backend/middleware/errorHandler.js

@@ -0,0 +1,7 @@
+const errorHandler = (err, req, res, next) => {
+    console.error(err.message);
+    res.status(500).json({ message: 'Server Error' });
+    next();
+};
+
+module.exports = errorHandler;

backend/models/Card.js

@@ -0,0 +1,16 @@
+const mongoose = require('mongoose');
+
+const cardSchema = new mongoose.Schema({
+    title: {
+        type: String,
+        required: true,
+        unique: true,
+    },
+    description: {
+        type: String,
+        required: true,
+    },
+});
+
+const Card = mongoose.model('Card', cardSchema);
+module.exports = Card;

backend/models/Form.js

@@ -0,0 +1,24 @@
+// models/Form.js
+const mongoose = require('mongoose');
+
+const formSchema = new mongoose.Schema({
+  name: {
+    type: String,
+    required: true
+  },
+  email: {
+    type: String,
+    required: true,
+    match: [/.+@.+\..+/, 'Please enter a valid email address']
+  },
+  query: {
+    type: String,
+    required: true
+  }
+}, {
+  timestamps: true
+});
+
+const Form = mongoose.model('Form', formSchema);
+
+module.exports = Form;