Hackwarts - Full Stack Workshop

Workshop Overview

Welcome to Hackwarts. In this workshop, you will build a full-stack application using React, Express, and MongoDB while learning about RESTful APIs. This project simulates a school planning system, where you can manage crew members, plan jobs, and track loot.

Workshop Objectives

By the end of this workshop, you will:

• Understand full-stack development using MERN (MongoDB, Express, React, Node.js).
• Create a RESTful API using Express.
• Use MongoDB and Mongoose for database operations.
• Build a React frontend to interact with the backend.
• Implement CRUD operations (Create, Read, Update, Delete).

Getting Started

Prerequisites

Ensure you have the following installed:

• Node.js (LTS version)
• MongoDB (Local or Atlas)
• Postman (for testing APIs)

Clone the Repository

git clone https://github.com/yourusername/hackathon-workshop-solutions-2026.git
cd hackathon-workshop-solutions-2026

Set Up the Backend

1. Navigate to the backend folder:

   cd server

2. Install dependencies:

   npm install

3. Create a .env file and add your MongoDB URI:

   MONGO_URI=mongodb://localhost:27017/Hackwarts # Can alternatively use Mongo Atlas
   

4. Start the backend server:

   npm run dev

   The server should now be running at http://localhost:4000.

Set Up the Frontend

1. Navigate to the frontend folder:

   cd ../client

2. Install dependencies:

   npm install

3. Start the frontend development server:

   npm run dev

   The frontend should now be running at http://localhost:3000.

Workshop Activities

This workshop is divided into sections where we progressively build upon HackHeist.

Activity 1: MongoDB Schema & Model

• Define a House model with fields like houseName, startDate, endDate and coreTrait.
• Create a Mongoose schema in models/houseModel.js.

Activity 2: Building a REST API with Express

• Implement CRUD routes for managing house members.
• (Optional) Use Postman to test the API endpoints.

Activity 3: Connecting React to Express

• Create a Student Page in React.
• Use Axios to fetch and display student data.

Activity 4: Adding Houses

• Define a House schema in MongoDB.

API Routes

Method	Endpoint	Description
GET	/api/student	Get all students
POST	/api/student	Add a new student
GET	/api/house	Get all houses
POST	/api/house	Add a new house

Next Steps

• Implement user authentication.
• Improve UI with Tailwind CSS or Material UI.
• Deploy the application using Vercel (frontend) and Render (backend).

Need Help?

If you have any issues, reach out on Discord!