WINNER This project won first place at the Connecticut FBLA State Leadership conference in the coding and programming presentation category. The project is now moving on to the national competition.
my-school is a project developed with React and Node.js for the 2023/2024 coding and programming CT FBLA competition.
The MySchool program looks like this in a localhost development environment:
In order to run this project you will need 3 applications installed on your machine
Install Microsoft's Visual Studio Code IDE from this website
Install Node JS from this website onto your machine to be able to run the start commands for the frontend and backend
-Install Git from this website onto your machine to be able to run the start commands for the frontend and backend.
-On this repository site (github.com), create an account that can be used to sign in in later steps.
One you have installed the necessary 3 applications, follow these steps to run the project.
On your desktop, right click anywhere and create a folder named mySchool
Open Visual Studio Code and drag the folder you just created into the Visual Studio Code window to copy it into your workspace.
In the Visual Studio Code search bar, type >Git: Clone and press enter.
After pressing enter the search bar should prompt: "Provide repository URL or pick a repository source"
Copy the repository clone link from the top of this repository page using the green
< > Code button
After entering the link and pressing enter, choose the folder you created as the destination and click open.
In Visual Studio Code, use the command Ctrl + Shift + ` (backtick) to open a new terminal window
Alternatively, you can click on the terminal menu button at the top of the screen in the navigation bar and open a new terminal
In the terminal window you just created, you should be located in the directory of your file. This means that at the end of the command line to the left of your cursor there should be my-school>, similar to below
Type these commands in this order into this new terminal window:
cd backend-> enternpm start-> enter- In the backend folder, enter the file server.js and press
ctrl sjust to save the file
After these commands, the backend server should start and the site https://localhost:8081 should be prompted in the terminal. If the server is correctly configured, the terminal should say "listening..."
In the terminal window you just started the backend in, click the + button to create a new terminal. You should again be located in the my-school directory.
Type the following commands in this order into this terminal window:
cd frontend-> enternpm i-> enternpm start-> enter
After these commands, the frontend server should start and the site https://localhost:3000 should open in your browser. If it does not automatically open, navigate to that site in any browser.
If this is successful, return to the frontend at http://localhost:3000 and the table should be filled with data. If it is not, refresh the page.
- Enter search terms into the search input and dynamically receive data
- Filter using five different methods of choice including alphabetically and by id number
- Filter using partner resource types
- Add and update users with custom preferences using validated input fields
- Manage partner resources with automatic database transactions
- Download a backup of the current database state to a text file using the download backup button
- Fully validated data to stop duplicate entries by partner name and new resource type
- MySchool AI which has access to all data to give fast responses to user questions
The frontend was developed using React with JavaScript. The project was bootstrapped with create-react-app. The frontend uses Bootstrap and Chakra UI for custom styling as well as Axios for connection to the backend API.
The backend server was developed using Express.JS with Node. The server includes 10 endpoints for data collection and manipulation
- Login Endpoint
- URL: /login
- Method: POST
- Handles user login by comparing the provided password with the stored admin password.
- Fetch All Connections
- URL: /connections
- Method: GET
- Retrieves all connections along with their associated resource descriptions.
- Fetch All Resources
- URL: /resources
- Method: GET
- Retrieves all resource types.
- Add Resource Type
- URL: /resources
- Method: POST
- Adds a new resource type to the database.
- Fetch a Single User by ID
- URL: /user/:id
- Method: GET
- Retrieves a single user by their ID, along with their associated resource descriptions.
- Create New Partner
- URL: /create
- Method: POST
- Creates a new partner in the database, along with their associated resource.
- Update a Single User by ID
- URL: /update/:id
- Method: PUT
- Updates the details of a single user by their ID, including their associated resource.
- Delete User by ID
- URL: /delete/:id
- Method: DELETE
- Deletes a user by their ID, along with their associated resource using a database transaction.
- Delete Resource Type by ID
- URL: /resources/:id
- Method: DELETE
- Deletes a resource type by its ID, replacing it with a new or existing resource type using a database transaction.
- Ask Question
- URL: /ask
- Method: POST
- Sends a user question along with partner details to the OpenAI API and returns the response.
The database is a MySql database previously hosted on a Raspberry Pi 4 but now in an Amazon Relational Database Service instance on Amazon Web Services. The database has been adjusted from a single table that included fields for id, name, type, resources, and contact for various contacts inputted to the database to now a 3 table model. The new relational model has increased normalcy and data integrity by integrating associations and key relationships.
- What was the context for this project?
This project was developed for the CT State 2023-2024 FBLA Coding and Programming Competition. The topic was to create a program that allows your Career and Technical Education Department to collect and store information about business and community partners. The program was required include information on at least 25 different partners (real or fictional), with details such as, but not limited to, the type of organization, resources available, and direct contact information for an individual. The program was also required to enable users to search and filter the information as needed.
- What was built?
The final project ended as a full stack web application using NodeJS and Express.JS for the backend, React for the frontend, and MySQL for database management. The backend includes a RESTful API which connects to the frontend to ultimately displays the database, hosted on an AWS RDS instance, on the frontend website.