hack4impact-calpoly / ecologistics-shared-calendar Goto Github PK
View Code? Open in Web Editor NEWCalendar scheduling system for Ecologistics SLO
Home Page: https://ecologistics-shared-calendar.vercel.app
Calendar scheduling system for Ecologistics SLO
Home Page: https://ecologistics-shared-calendar.vercel.app
Description
EVENTS created / added are stored in the backend on our MongoDB, they should entail flags for pending, approved and denied, as well as other parameters such as images (for now it doesn't need to work or be actually implemented but it should have this parameter), etc. like location. For ADMIN side, only admin page changes.
Acceptance Criteria
Event added is shown in MongoDB backend, and POST and GET queries work and are functional, images should work.
Steps:
Additional Information
Once you have finished, request a review from tech leads.
As a result of the merge, we have a couple of small bugs to address on the front end, one of which is making sure that the "show" buttons for the password when logging in are consistent with the other pages. Right now, on the login page and the sign up page the show password buttons are not correct.
The correct implementation should look like this:
TODO: Please make the changes on the login page and the sign up page so that the "show" button is implemented within the textbox.
Another small issue is that the "new event" button on the calendar page defaults to look like this:
When it should look like this:
TODO: Please make the changes on the calendar page so that the "new event" button always has the desired padding ratio
Description
Code new Admin page, implement the layout shown below with the different sections and tables. Do not worry about the username dropdown in the top right. Also, as seen in second screenshot below, when an Admin tries deleting an event, just make a verification for their action pop up to confirm the deletion.
Acceptance Criteria
Admin page looks like the first screenshot, and is functional. Also, when an Admin clicks the trash icon to delete an event, a request for verification to delete the event pops up.
Steps:
Additional Information
Once you have finished, request a review from tech leads.
Description
Calendar, event bar and event details page all populated with EVENT backend data. All USER/organization side.
Acceptance Criteria
Event added is shown in MongoDB backend, and POST and GET queries work and are functional.
Steps:
Additional Information
Once you have finished, request a review from tech leads.
PREREQUISITE
Login and Sign Up pages need to be completed before starting this
Description
Edit the current navbar, make it look nice (up to dev at this time, not on Figma currently). Incorporate the current Home About Calendar pages. Link it through all pages.
Acceptance Criteria
Working navbar
Steps:
Additional Information
Once you assign yourself to this issue change the status under "projects"
Once you are done and make a PR assign Hannah AND Muzart as your reviewers
for details on font, color, etc. please refer to the Figma design
Description
Research MongoDB for the Calendar website (for user info + event data)
Acceptance Criteria
Contact Muzart or Hannah to discuss the research performed with a documented plan of what to do / set up
Steps:
Important Information
Once you're done with this task talk to Muzart or Hannah, as after this you will create the MongoDB backend.
Additional Information
Once you assign yourself to this issue change the status under "projects"
Once you are done and make a PR assign Hannah AND Muzart as your reviewers
For details on font, color, etc. please refer to the Figma design
Description
Create a bare bones login page
Acceptance Criteria
Simple login page complete with routing from navbar
Steps:
Other notes:
Description
An admin account can approve or deny incoming account requests.
Acceptance Criteria
Working admin account can approve or deny account requests, and it will allow a user to sign up and login after approval, or be notified of denial.
Additional Information
Request review from TLs when done.
Description
This is the page that shows up once you create an account and are waiting for it to be approved. There are two ways to reach this page:
Note: "Go to Calendar" button goes to the public calendar page in #82 , if this is not implemented yet just have it go to the regular calendar for now
Steps:
Request review from tech leads once finished
Description
Alter event details page styling and allow the page to be navigated to by clicking on an event. You do not need to populate the page or make it unique to the event.
Acceptance Criteria
Page matches figma and clicking on an event opens the event details page (does not need to be populated)
Steps:
Description
Forgot password page that takes in username/email that will eventually send a request through number / email to reset a users password. Currently no design so freestyle! (Look at login / sign up pages for inspo).
Acceptance Criteria
Simple forgot password page complete with routing from navbar.
Steps:
Additional Information
Once you assign yourself to this issue change the status under "projects"
Once you are done and make a PR assign Hannah AND Muzart as your reviewers
for details on font, color, etc. please refer to the Figma design
Description
Design and implement mobile viewing for the login, sign up, and forgot password pages.
Acceptance Criteria
Distinct desktop and mobile views. Mobile views work for all the views shown below:
Steps:
Description
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Acceptance Criteria
A clear and concise description of what you want to happen.
Steps:
Additional Information
Add any other context or screenshots about the feature request here.
Description
Add an interactive table where the admin can approve incoming events.
Acceptance Criteria
Table matches the figma with the addition of a deny button (would be right next to approve).
Steps:
Once you have finished, request a review from tech leads.
Description
Design and implement a mobile view for the calendar page
Acceptance Criteria
Calendar page is easy to navigate on the below mobile screens
Steps:
Description
PREREQ #75
Completion of USER and ADMIN profile page needed. Basically implement the change email as show in SS.
Acceptance Criteria
Linked to backend, and information changes. Looks like screenshot (SS) below.
This pop up would only show up if the email submitted into the field is different than the email associated with the account.
Steps:
Additional Information
Once you have finished, request a review from tech leads.
Description
As per the request of our charity representative, we need to add a couple of more fields in the apply for account page. In this issue you will implement these changes as well as implement how this should be reflected in the design of the account approval page.
Current Account approval page (admin) :
^ For the above page, our charity wants the following information to be included:
You must first alter the design of the page to include this information and then send to hannah for approval
Description
Simple events page
Acceptance Criteria
Page matches Figma design
Steps:
Additional Information
Description
Add a map to the event details which shows the location corresponding to a given event. If possible, add functionality so that the user can click on the map to receive directions.
Acceptance Criteria
Working map in event details page, connected to backend locations
Description
Barebones apply for an account page.
Acceptance Criteria
Simple apply/sign up page complete with routing from navbar
Steps:
Additional Information
Description
Add a calendar component using full calendar
Description
Match the frontend of the calendar page to match the figma. Fix the proportions of the event bar, calendar, and the search bar. Add a button for logging out.
Acceptance Criteria
Page matches Figma
Steps:
Navigate to src -> pages -> calendar.tsx
add a logout button, as shown on Figma
make the calendar take up half of the page (may have to adjust the sizing of the event bar to do so)
Navigate to src -> pages -> eventBar.tsx
match border colors to the figma
make the event cards smaller to match proportions on figma
add the icons next to "event tag", "location", and "website URL"
expand the width of the search bar to match figma
Description
Research how we can implement email/text notifications for admin when someone submits and event.
Notification would be something along the lines of "Event request from [organization] requires your approval" and would also include an easy link to the admin portal.
Acceptance Criteria
a google doc outlining tools and steps of how this can be done
Additional Information
Submit your google doc link as a comment on this issue
Description
Add a dropdown, should be at the top of every page, USER and ADMIN have different drop downs, pull UIDs for each to get the different drop downs. USER seeing its respective drop down, and ADMIN seeing its respective drop down. Make this a Navbar, review figma, add the orange logo home button to return to calendar page.
Acceptance Criteria
Drop down is functional, and looks the same as the screenshots. Navbar implemented with home button.
Steps:
Additional Information
Once you have finished, request a review from tech leads.
Description
Admin view page showing account requests
Acceptance Criteria
Requests for new accounts appear on an admin page (view Figma for design)
Steps:
Additional Information
Description
Add functionality to the search bar so that it searches through events for a given day and only shows events with certain keywords in the title
Acceptance Criteria
search bar is functional
Steps:
Description
Look at Figma and match color and font for the css of the entire website
Acceptance Criteria
Colors and fonts match
Steps:
Additional Information
Once you assign yourself to this issue change the status under "projects"
Once you are done and make a PR assign Hannah AND Muzart as your reviewers
For details on font, color, etc. please refer to the Figma design
Description
Research how to implement adding check boxes on the calendar (ability to click on certain days and select it and see the events of that day pop up on the event bar)
Acceptance Criteria
Research and possible future implementation for whoever picks this task up. Talk to Muzart or Hannah about how to do this if possible.
Steps:
Additional Information
Once you assign yourself to this issue change the status under "projects"
Once you are done and make a PR assign Hannah AND Muzart as your reviewers
Description
In this issue you will create a default calendar landing page that can be embedded directly into the ecologistics web page. This will now be the default page when you launch the app. It should look like this (note the difference in the dropdown menu in the top right compared to the pages once you log in):
Basically, if the user is an organization, they should click the login drop and by clicking the login, it should open a new tab to the "login to your account" page and the organization should be able to login or make an account from there.
What the login drop down looks like:
Acceptance Criteria
Make a PR and assign your tech leads as reviewers once you have finished.
Description
"Add Event" button functions like clicking on the Calendar (which we have been using up until now). The "Add Event" button is found at the bottom of the adding event pop up which is currently implemented.
Acceptance Criteria
"Add Event" button is functional.
Steps:
Additional Information
Once you have finished, request a review from tech leads.
Populate all the fields in the profile page from backend.
Fields that need to be added:
Also make sure that the editing page actually adjusts the backend. Also make sure that the different tags (user/ admin tags at top) are displayed depending on the type of user.
IMPORTANT: have some kind of buffer or "loading..." text so that while we are waiting to get from the backend there isn't just a blank.
Description
Forgot password page asks for users email, sends an email when inputted with instructions on how to reset password
Acceptance Criteria
Email arrives (can be blank for now)
Steps:
Run "git pull" and "npm i" on dev branch
Create a new branch for this issue and check it out
!! Make sure to commit to your branch as you go. You should NOT be working on the dev branch !!
On the forgot password page, prompt user to enter email or username linked with email, which will send a blank email to the email inputted.
Research how to send emails if you don't know how or message Muzart or Hannah if you're having trouble.
Additional Information
Once you assign yourself to this issue change the status under "projects"
Once you are done and make a PR assign Hannah AND Muzart as your reviewers
For details on font, color, etc. please refer to the Figma design
EDIT: look into Clerk as well, weigh pros and cons.
Description
In this task you will be figuring out how to integrate AuthN for our log-in and sign-up pages. Consider:
Helpful link: NextAuth.js
For your research, write up a google doc that we can use as reference for our implementation. Include code snipets, screenshots, etc. To submit, link the document in the comments and request a review from the tech leads.
PREREQ: #78 -> if this is not done yet, just build the page and connect what you can
Use existing components to create the organization events page as shown in the Figma:
DONT ADD POSTPONED EVENTS FOR NOW
Connect all the fields to the backend:
Steps:
Additional Information
Implement functionality throughout the app to keep track if the information being entered by the user is attached to a valid account.
This can be as simple as having some red text that would pop up under the text box that says something "Incorrect code. Try again." or "Invalid email or password."
Functionality should be added on the following pages for their respective cases:
log in page cases
Profile page editing cases -> also in the code verification page for login/signup flow
Apply for account page cases
Things to consider:
Description
Create GET, POST, and DELETE endpoints for the user.
Acceptance Criteria
Create working GET POST DELETE endpoints for the user
Steps:
Additional Information
Once you have finished, request a review from tech leads.
Description
As of right now, the sign up page and login page do not exactly match (different font sizing, button sizing, etc). This task will make the styling for the pages the same as each other, and ensure that everything matches the Figma perfectly.
Acceptance Criteria
Both pages match the Figma and do not have variance in their styling (would recommend making a component)
Steps:
PREREQ: #9
Description
The current add event page converted to a pop up on the main Calendar page when the "Add Event" button is clicked.
Acceptance Criteria
Event pops up when you click add event on the calendar page and you can type on it (don't link it to calendar yet)
Steps:
Run "git pull" and "npm i" on dev branch
Create a new branch for this issue and check it out
!! Make sure to commit to your branch as you go. You should NOT be working on the dev branch !!
Additional Information
PREREQ: #7
Description
Alter the styling of the create account page to match the figma design
Acceptance Criteria
Create account page with new styles applied
Steps:
Other notes:
PREREQ: #5
Description
Alter the styling of the login page to match the figma design
Acceptance Criteria
Simple login page complete with routing from navbar
Steps:
Other notes:
Description
This page is what will pop up when you click on each event on the calendar to see more details
Acceptance Criteria
Design matches the figma exactly
Steps
Other notes:
PREREQ: #78
Populate backend on admin events page
DO NOT WORRY ABOUT POSTPONED EVENTS FOR NOW -> comment out any code for that if it exists
make sure that the text for denying an event is taken care of as well so it can display on the organization side:
Description
Add a profile page for ADMIN and USER
Acceptance Criteria
Profile page exists and is linked to the drop down (it's ok if the drop down isn't made yet, it doesn't need to link in that case). ADMIN and USER profile pages should display USER or ADMIN on the side as shown in the screenshot.
Steps:
Additional Information
Once you have finished, request a review from tech leads.
Description
Add event bar to the right of the calendar
Acceptance Criteria
Event bar looks exactly like the figma
Steps:
Other notes:
Description
Figure out how to add events to the calendar
Acceptance Criteria
Add an event within the date boxes on the calendar page
Steps:
Other notes:
Description
Implement user authentication using Clerk
Acceptance Criteria
Authenticate users logging into the calendar portal
Description
Create GET, POST, and DELETE endpoints for the events.
Acceptance Criteria
Create working GET POST DELETE endpoints for the events
Steps:
Additional Information
Once you have finished, request a review from tech leads.
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.