A database portal for managing business operations for Plant It Again, a local nonprofit that aims to create careers for adults with developmental and intellectual disabilities.
Home Page: https://pia-dev-60cea.web.app/
License: MIT License
We need a backend route to add new programs to the database. The fields that need to be stored are Program Name, Program Type, Start Date, End Date, and Cover Color. See the figma for more details on the information that needs to be stored. Note that program start/end dates field might change based on the type of program a user is creating. For now just assume that all programs have a start and end date.
References:
Users need a way to edit a student profile. This will look very similar to the add student form except that the form would be populated with the students information. Moreover, instead of calling the create student route, we should instead call the edit student route. The figma designs can be found here..
Here is what a populated student form looks like
Tasks:
The epic is mainly used to list tasks that don't particularly fit into a single feature but are important for the overall app.
Need to create the button components based on Figma.
Note that we also need a special button for admin/team in the signup flow. See pictures below for references.
Note we also need some curved buttons
We need a form to be able to add and edit a program card. Lucky for us this form is shared with the add program form. Note we are now moving this to use the V2 designs instead.
Check out this PR to get some reference on how to implement the edit user backend. Essentially we would need multer in order to convert the image to binary and then store it on MongoDb. Also, the route should be flexible and be able to take only one of the User Document Params and update that. Note that on frontend we only update each aspect of a user profile individually instead of it being one big form like for student/program form.
We need a way to be able to edit a programs information. This feature uses a similar form to "Add Program" except the data is populated. Other than that it is a pretty straightforward process. Figma designs can be found [here.]( (https://www.figma.com/file/N16keN1mV1QDnorLB1GC6C/Plant-it-Again-(PIA)-Program-Manager?type=design&node-id=2020-9410&mode=design&t=WnlTGgLHoaEgPgqq-0)
Tasks:
V2 has a new page for viewing a student profile. In MVP we routed it to the edit student form but this time we have an actual page to route to. The task is pretty straightforward to implement. If a user clicks on the edit student button then they should be routed to a pre-populated add student form (similar to what we do in MVP). See Figma for details.
Tasks:
A new feature for V2 are progress notes which simply record data on a student's progress. It is important to note admin members can add, modify, and download progress notes. Whereas, team members can only add and view progress notes. User's must also have the ability to query by programs and search for specific students. See Figma for details.
We need a common middleware function on our backend that acts as an auth layer. This function should check to make sure that a valid user is accessing the route and should update the req body to add the type of user accessing the route. This way we can ensure that all of our functions are protected and that no one can steal data.
References:
One of the most important functionalities of the portal is to be able to add new students. This is done through a form which then sends the data to our RestAPI to be updated on MongoDb. Take special note of the different fields that need to be filled out. The figma designs can be found here.
Tasks
An important functionality of the app is to be able to add programs to the database. Programs represent the classes that students sign up for. For this feature we need a form to input data and our backend needs to update the data in our database. The figma designs can be found here.
Tasks:
Our app needs a way for users to login. This feature will primarily constitute of frontend work since it will deal with the firebase on the frontend. The figma can be found here
Landing Page:
In hindsight we need users to sign in via the landing page. Our app should then send our credentials to Firebase. Once we get confirmation that the credentials are correct and the auth token, we should route users to the home page. If a user has not been approved yet then we need to route them to a page indicating waiting for account approval.
Home Page:
Once login is successfully completed the last thing that needs to be done is to ensure our routes are protected. To do this you need to ensure that we send the auth token in the header of the route body. This is our way of telling our API that a valid user is accessing the routes.
Tasks:
The programs are organized in a unique way in that they are in cards kind of like canvas. We need these card components in order to be able to populate the program page
This feature is the page where users can see all students and is the home page for the app. When users login in, this is the page they are routed to. The main component of this feature is the student table. Users need to be able to make queries and the table should dynamically update based on the queries.
Empty Home Page:
Home Page w/ students:
Tasks:
There are four main input fields. See the figma for details on what these components look like. I've also added some screenshots below for additional reference.
This contains the majority of the input components.
The calendar input should open some calendar view like this and users should be able to select a date.
We need a backend route in order to create a student and store the necessary data on MongoDb. The following fields that need to be stored are Student contact, Emergency Contact, Service Coordinator, Location, Birthdate, Medication, Dietary Restrictions, Intake-Date, Tour Date, Program Signed up for. See the figma for more details on the information necessary.
References:
We need to setup some functions to call API routes in the function. This includes GET, POST, PUT, PATCH, DELETE. We basically need something like this file. To test that these functions work feel free to create some test routes on the backend. We just need to make sure that we're able to call the routes.
In this task, we aim to enhance the functionality of our system by creating a backend route dedicated to gathering essential information about a program for an all-student page. This involves updating the student schema to include fields for storing the program ID they're enrolled in and their current status within the program. Additionally, modifications to the program schema are required to incorporate a list of student IDs categorized by their respective statuses. By implementing these updates, we ensure efficient retrieval and presentation of program-related data, facilitating a seamless experience for both students and administrators.
Written by chatgpt. Ask @adhi0331 if you have questions
We need to implement the sidebar component which allows us to navigate the main page.
For now don't worry about actually implementing the various pages itself. Just make sure that it changes to the different pages based on which page was clicked. For example if home page was clicked then the home page should be displayed. You can literally have the home page be a simple page that says ("This is the home page") and same for the other pages as well.
We need a page to be able to approve accounts. This page will be known as the notifications tab. Note that only admins will be able to access this page. The process for how this will work is simple. First we will get all accounts that have not been approved. We will then display each account using the special cards shown on figma. Then users will have the option to accept or deny an account. In both cases we will want to send an email to that user indicating their approval status. If a user has been accepted then we need to modify their status state to be true on MongoDb. If a user is rejected then we need to delete the respective document on MongoDb and Firebase.
We need a landing page for our programs. This page will look somewhat similar to canvas in that it will have cards that display data on each program. One important thing to note is that Team users can only view the programs, so they should not have any edit capabilities. Here are the figma designs.
Program Page:
Tasks:
We need a way to login to our app using firebase. Here is some documentation on how to setup authentication on frontend. First we need to initialize a firebase app on our frontend. Then we can use the built in signInWithEmailAndPassword function that firebase provides us. Once a user is signed in they need to be routed to /home (or the student table page). Here is a video I found that shows an example of how to login using firebase, they use the app router instead of the pages router but I think it gives a general sense of what needs to be done. Lastly, we need to ensure that all routes that are called from the app are protected with the auth token (add the auth bearer token to the header of each route).
Description:
The V2 website has a new program profile page. This page is supposed to show all students that are associated with a particular program and display it in a table format. Morever, it should show any other relevant info at the top of the profile page. See Figma for more details. We also need the functionality to restore a program that has been archived
Tasks:
The V2 student form has a new look with new features such as pdf upload, profile pic upload, and new fields for program info. Outside of the UI changes there are also some significant changes that need to made to the backend schema. See Figma for design details. BE SURE TO CLICK THE PLAY BUTTON TO VIEW ALL FEATURES. Also reference this doc on how the new backend schema should work.
Tasks:
This issue describes everything needed to be completed for creating a user account. This features constitues of integrating a method of adding users to firebase and MongoDb, and creating the overall flow on the website. See the Figma for more details on the overall flow.
UI Designs:
Resources:
Tasks:
We need a backend route to be able to get all student information so that we can populate our data table. If the create student route is not in by now, then feel free to manually add students to mongodb.
Arguably one of the hardest features to implement, we need a calendar view that shows a students attendance in hours per day. Moreover, we need to create a view that shows the invoice details. To simplify the development process, this tasks is being split into two separate parts. See Figma for more details.
Calendar Tasks:
This is being removed
Invoice Details:
The V2 student form has a special button that are meant to upload pdfs. This includes things such as student info, waivers, etc. Essentially this specific task is centered around implementing that button component.
Method of Implementation:
The general idea is that we want to store the file on firebase and the store the link reference on MongoDb with the associated student. The firebase documentation and this video has a pretty good explanation on how this should work. Most of the other videos online show uploading images as an example but the same process should work for pdfs.
For this particular task you DO NOT need to worry about updating the MongoDb. That's something we'll deal with when creating the new V2 student form. If you want to think about it in terms of creating a function essentially once the file has been successfully uploaded we want to return the link reference. By link reference I mean the "some-child" part of this line const storageRef = ref(storage, 'some-child'); in the documentation because that is what will be needed to retrieve the reference in other parts of the app.
Our users need a way to be able to edit their profile. This includes being able to upload a png or jpg as a profile picture. The Figma details the various methods of being able to edit a profile. For this feature you would need to create individual forms for each aspect of a user profile and create a route such that it can make each individual edit.
Tasks:
We need a backend route to be able to create new users. There are two types of users: Admins and Teams. We need store a users email, password, name, gender, account type (Admin/Team), and approval status. The users email and password need to be stored on Firebase in order to ensure that it is protected. The other stuff can be stored on MongoDb. Note that we need to ensure there is some linkage between the firebase account and the user document on MongoDb. Additionally the account type can be stored on Firebase using Custom Claims.
References:
We need a UI to be able to login to the portal. This will be the landing page for our app.
We need some form to be able to add and edit new students. Lucky for us this form is the same as the one for add new student.
See this example from TSE onboarding as inspiration.
In this task, we aim to enhance the functionality of our system by creating a backend route dedicated to gathering essential information about a program for an all-student page. This involves updating the student schema to include fields for storing the program ID they're enrolled in and their current status within the program. Additionally, modifications to the program schema are required to incorporate a list of student IDs categorized by their respective statuses. By implementing these updates, we ensure efficient retrieval and presentation of program-related data, facilitating a seamless experience for both students and administrators.
Our app needs a UI for the profile page. It also requires some special forms to be implemented that allows users to edit different fields. See Figma for what the styles should look like.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
