Crampus

Crampus is a web application designed to help UCLA students discover, review, and plan study sessions at various spots across campus and off campus as well. With features such as filtering by building type, outlet availability, and proximity to food, Crampus is the perfect app for finding the ideal study spot. Users can also contribute by adding new spots and leaving reviews, making it a collaborative platform. Additionally, Crampus offers an integrated todo-list and assignment tracker to help students stay organized during finals.

Tech Stack

• Frontend: React.js Tailwind CSS
• Backend: Node.js Express
• Database: MongoDB Atlas
• Authentication: Passport.js with Google OAuth 2.0

Prerequisites

Before you begin, make sure you have these installed:

• Node.js (v18 or v20)
• MongoDB running locally
• npm for package management

Local Development

1. Clone the repository

git clone https://github.com/yourusername/CS35lCrampus.git
cd crampus

2. Install dependencies

Install backend dependencies:

cd server
npm install 

Install frontend dependencies:

cd ../client
npm install

3. Configure your .env file

Create a .env file in the root directory and add the following:

MONGO_URI=your-mongodb-uri
PORT=5000
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
GOOGLE_CALLBACK_URL=your-callback-url

4. Start MongoDB

mongod

5. Start the backend and frontend

Frontend:

cd client 
npm run dev

Backend:

cd server
npm start

Log in

Currently only UCLA students can log in; Crampus requires an active 'ucla.edu' account.

Diagram / Structure of Code

High Level Diagram (only shows relevent, manually coded parts)

├── client
│ ├── tailwind configuration files
│ ├── public
│ │ ├── fonts # used for yorkmade font
│ │ ├── crampuslogo.png # logo
│ │ ├── default-profile.png # deafult profile picture
│ └── src
│ ├── components/ # Reusable UI components
│ │ ├── AverageRating.jsx # compute the average rating of each spot card
│ │ ├── LoginRequired.jsx # component that warns the user that you must be logged in for different reasons
│ │ ├── NavBar.jsx # navigation bar
│ │ ├── NewReview.jsx # create a new review
│ │ ├── Review.jsx # review display / logic
│ │ ├── SearchBar.jsx # search for cards with text and tags
│ │ ├── SpotCard.jsx # create each spot card
│ │ └── TasksByDay.jsx # create the tasks for each day in the scheduler
│ │
│ ├── hooks
│ │ └── useAuth.js # custom hook to check if the user is logged in
│ │
│ ├── layout
│ ├── pages
│ │ ├── addSpotPage.jsx # form to create a spot
│ │ ├── assignmentPage.jsx # page to create a new assignment / to-do
│ │ ├── loginPage.jsx # page to log in
│ │ ├── mainPage.jsx # home page that displays spots
│ │ ├── MoreInformationPage.jsx # page that displays details for each spot
│ │ ├── profilePage.jsx # user profile page
│ │ ├── schedulePage.jsx # scheduler / calendar page
│ │ └── signUpPage.jsx # sign up for an account page
│ │
│ ├── App.jsx # route definitions
│ ├── index.css # CSS and Tailwind imports
│ └── main.jsx # react entry point (renders <App />)
│
├── server
│ ├── models
│ │ ├── Spot.js # define the mongoose model for a spot
│ │ ├── Todo.js # define the mongoose model for to-do tasks
│ │ └── User.js # define the mongoose model for user tasks
│ │
│ ├── routes
│ │ ├── google.js # routes for Google OAuth and user management
│ │ ├── spots.js # routes for study spots
│ │ └── todos.js # routes for todo tasks
│ │
│ ├── uploads # temporarily stores files before using grdifs
│ │
│ ├── gridfs.js # gridfs setup for file‐streaming uploads
│ ├── index.js # express app entry point
│ └── package.json # dependencies & scripts
│
├── .gitignore # files to ignore in Git

Future Features Roadmap

• Interactive map view (ArcGIS or Google Maps)
• Save favorite spots
• Certificates for studying
• "study crawl" functionality
• Admin moderation tools
• Profile Badges and Frequently Visited
• Dark mode toggle