Official website for SFU Blueprint showcasing our projects, team, and mission.
- Quick Setup Guide - Get started in 5 minutes
- Contributing Guide - Development workflow and best practices
- Technical Handover - Comprehensive technical documentation
- Dependencies - Full dependency list and management
- Node.js 22.x
- npm 10.x or higher
npm installIn the project directory, you can run:
Runs the app in development mode with Vite's dev server.
Open http://localhost:5173 to view it in your browser.
The page will reload when you make changes using hot module replacement (HMR).
Builds the app for production to the dist folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
Locally preview the production build from the dist folder.
Useful for testing the production build before deployment.
This README guide is designed to help you understand and manage the data for your website effectively. All crucial data is stored in the src/constants directory, within specific JavaScript files organized by functionality. Below, you will find instructions on how to navigate and update each file.
The data for the website is organized into several files within the src/constants directory:
- Team/ (mix of .js and .ts files)
Alumni.js: Contains data about alumniBlueprint.ts: Team members who worked on the Blueprint projectExecs.js: Executive members of the organizationMembers.js: Current team members not tied to a specific projectMosaic.ts: Team members who worked on the Mosaic projectPedals.ts: Team members who worked on the Pedals projectOurCommunityBikes.ts: Team members who worked on OCB projectReelYouth.ts: Team members who worked on Reel Youth project
Event.js: Upcoming and past eventsHiring.js: Open roles and hiring statusNotification.js: Notification messages displayed on the websiteprojects.ts: Ongoing and past projectscaseStudies.tsx: Case study content and layouts
To update or add new events, navigate to the Events.js file. This file contains an array of event objects. Each object represents an event with properties such as title, image, date, description, and a link. To add an event, append a new object to the array with the respective details.
The Hiring.js file within the Team folder manages information related to job openings and roles. It is structured as an array of role objects, each with details like the role name, description, hiring status, and links for applications. Modify the Hiring property to true or false to open or close the hiring for a role, and update the link and description as necessary.
To update or change the notification messages displayed on the website, you should modify the Notification.js file located in the src/constants directory. This file controls the visibility and content of notifications across the site.
To add or update project information, go to the projects.ts file. This file contains a list of projects each defined by a comprehensive set of properties such as the project name, description, images, tags, and detailed descriptions of the project and the associated non-profit organization. Update the existing project details or add new ones as needed by following the same object structure.
To add or update case study pages, go to the caseStudies.tsx file. Each case study includes hero content, solution details, testimonials, and team member information. Case studies are dynamically routed via /projects/:slug.
- Always ensure that the structure of the data objects is consistent with existing entries to avoid issues in the frontend rendering.
- When adding images or links, make sure they are correctly pathed and accessible.
- The project uses a mix of JavaScript (.js) and TypeScript (.ts/.tsx) files. New files should use TypeScript when possible.
After making changes, save the files and commit the changes. Make sure to test the website to see that all data updates are appearing as expected. Finally submit a Pull Request.