recoded-org / capstone-iqlbps-flashcard Goto Github PK

Summary

A page that allows logged-in users to either create a new set or select a previously created set to add cards to.

Screenshots

Basic example

N/A

Motivation

Allow the user to either create a new set or select a previous set they own.

Summary

This section should display the card content of the current set and users should be able to browse through them.

Screenshots

Basic example

N/A

Motivation

Allow the use to go through the cards added to the set.

Summary

The newly created card with it is image and sound should be saved in the cloude storage and firestore services.

Screenshots

N/A

Basic example

N/A

Motivation

Save the created card alongside it is media.

Summary

Fetch the comments related to the currently viewed set

Screenshots

N/A

Basic example

N/A

Motivation

Show the comments of the current viewed set

Summary

The home page will be different for logged-in users. There will be three sections to view. Top rated. Latest, and suggested.
The user will be able to see some of those sets on their home page.
Fetch those and display them to the user as well as save them to the store.

Screenshots

N/A

Basic example

N/A

Motivation

Show different sets to the logged-in users.

Summary

Fetch the correct user info based on the passed id in the router.

Screenshots

N/A

Basic example

N/A

Motivation

Being able to display the correct use info

Summary

When the user logs in change the nav to display that allowing the image of the user to be displayed on the right side of the nav. Alos, display a dropdown when the user clicks on their image showing 2 options. Profile, and Signout

Screenshots

Basic example

N/A

Motivation

To show the user that they are logged in and display their image.

Summary

Create a firebase project for the capstone and add your teammates to it. Also, don't add analytics to the project, and when you create the firestore make it for testing or just open its rules. Also, initialize that in the repo.

Screenshots

N/A

Basic example

N/A

Motivation

We will use firestore and Firebase auth to allow users to signup/login and store their data.

Summary

A page that allows users to change their user name on the website as well as their profile image.
It also displays all the card groups that they created or added.

Screenshots

N/A

Basic example

N/A

Motivation

So that we have a page that allows user to change their settings.

Summary

Allow the user to type in anything into the form and then move them to the search page and make those words part of the filtration in the new search page and display related sets.

Screenshots

N/A

Basic example

N/A

Motivation

The user should be able to search through the sets and see related results.

Summary

A Nav component that can show 2 different sides depending on whether the user is signed in or not.
Note: No functionality is required only design!

Screenshots

Basic example

N/A

Motivation

We use the navigation to easily navigate between pages and search for groups of flash cards.

Summary

Update the user info in the firestore user's collection with the image they choose and/or the new user name they set

Screenshots

N/A

Basic example

N/A

Motivation

Allow the user to chnage their image and name, and save those info into the firestore.

Summary

The sections should showcase images from the Website usage, that we can add later. Also, the component should be reusable and show different sides.

Screenshots

Basic example

N/A

Motivation

Showcase the features of the website and its usage.

Summary

This shows the team members who worked on the project.

Screenshots

N/A

Basic example

N/A

Motivation

A place where users can see our team member and reach out to them.

Summary

Create a contact us page, where visitors can send us an email. Make sure to use react-hook-form for validation.

Screenshots

N/A

Basic example

N/A

Motivation

Allow the users to contact the team.

Summary

Using the flowbit library create an Alert component. It should take multiple types and messages see this link for more detail.

Screenshots

N/A

Basic example

N/A

Motivation

Provide feedback to the end user when something happens, like a fetch success or an error.

Summary

This will logged-in users to add comments to the set and view other people's comments.

Screenshots

Basic example

N/A

Motivation

Allow users to add comments to the set and view others' comments too.

Summary

A component that displays the set card, so that the user clicks on it and goes to the Set page, and explores the created cards.
Note: add to library button should be a child, we will change this to review when the user has this added to their library.

Screenshots

Hover effect:

Basic example

N/A

Motivation

A card component that displays the basic info about the set.

Summary

Fetch the user session and store it in the userSlice so that we can use this info on different pages.

Screenshots

N/A

Basic example

N/A

Motivation

We need currently logged-in user info for various usage on the website.

Summary

Once the user clicks to create a new set, the set should be created in firebase so that the users can see it. Also, the id should be saved to the local state of the component since it will be used to create new cards immediately.

Screenshots

N/A

Basic example

N/A

Motivation

Create sets and save them to firestore.

Summary

SetInfo is a component that displays the info of the current set. Rating, cover image, and description. As well as, a CTA to add this set to the user's own library.

Screenshots

Basic example

N/A

Motivation

Allow the user to see the info of the current set they are viewing.

Summary

A page that will display all user's card groups.
This should be created after the user is capable of creating sets because we will need to fetch them here.

Screenshots

N/A

Basic example

N/A

Motivation

The user will be able to look through all the sets that they created or added to the website.

Summary

Install react-router and create a file in the src directory that contains the routes as exported costs so that they can be used in other places.

Screenshots

N/A

Basic example

N/A

Motivation

The router will be used to switch between pages and different routes.

Summary

Update the data of the search page based on the filters being used on the page. Whether that is the left filter section or the param coming from the router.

Screenshots

N/A

Basic example

N/A

Motivation

To allow the user to filter sets based on the data available.

Summary

Google button to allow users to signup and log in to the website using their google accounts.

Screenshots

Basic example

N/A

Motivation

Allow the user to use google signup to access the website.

Summary

Allow the user to signup to the website using their email address. Make sure to use react-hook-form for validation.

Screenshots

Basic example

N/A

Motivation

To allow users to signup with their emails address.

Summary

This should allow the user to add a front and back section to his card. The user then should be able to add this to the set he selected in the header of the page.

Screenshots

Basic example

N/A

Motivation

Allow the user to add text, images, or voice to the front and back of their card.

Summary

A profile page that shows you info about the user you click on. This can show their image and user name as well as the sets they created.

Screenshots

Basic example

N/A

Motivation

Users should be able to visit other user's profiles and see what they have worked on.

Summary

This page will allow the user to review the current set they are viewing.

Screenshots

Basic example

N/A

Motivation

The user should be able to go through the cards and record whether he got correct or wrong answers on them.

Summary

The website will be translated into 2 languages (You can vote and choose which 2) In order to that we will need i18next installed and set up in the repo. Also, create the language translate files in the public folder as well.

Screenshots

N/A

Basic example

N/A

Motivation

To be able to use multiple languages and switch between them easily.

Summary

Fetch the card data of the currently viewed set and allow the user to review it.

Screenshots

N/A

Basic example

If the proposal involves a new or changed API, include a basic code example. Omit this section if it's not applicable.

Motivation

Allow user to review the sets and save their results of wrong/right answers.

Summary

Whether the user registers with the custom registration or the google button, they should have a record created in the firestorm users collection so that we save related data there like user name, image, and an array of sets they have...etc Also, once that happens the user should be saved in the redux userSlice.

Screenshots

N/A

Basic example

N/A

Motivation

Allow the user to register or signup using google auth, and save their data.

Summary

The user should be able to sign out from the nav dropdown menu shown when you click on the user profile image.

Screenshots

N/A

Basic example

N/A

Motivation

Allow the user to sign out of the website.

Summary

Create a 404 page that displays an error if you route to an unknown page.

Screenshots

N/A

Basic example

N/A

Motivation

Just give the user something to indicate to the user that he is moving to the an-unknown page.

Summary

Create a Filter component that will be shown on the left side of the search page.
There should be some criteria to filter the

Screenshots

Basic example

N/A

Motivation

Giving the user the ability to filter through the card groups we have.

Summary

We will be using react-hook-form and Yup for form validation.

Screenshots

N/A

Basic example

N/A

Motivation

react-hook-form makes validation a lot easier and Yup can help us with the schema to validate against.

Summary

Check and make sure the cards button is routed to the correct component in the search page/ library page.

Screenshots

N/A

Basic example

N/A

Motivation

Allow the user to view sets or study them depending on the parent component.

Summary

Fetch categories from the firestore collection, and display them once you click on categories in the navbar.

Screenshots

N/A

Basic example

N/A

Motivation

Allow the users to see specific category sets.

Summary

Deploy the project to Netlify and add the link to the repo description. Also, make sure that CD runs every time there is a PR in the repo.

Screenshots

N/A

Basic example

N/A

Motivation

So that we are able to see a live version of the project and the changes are shown every time we make a PR

Summary

Add a language button/dropdown and allow the user to switch between the 2 languages. Make sure to switch the layout if needed for lr/rl languages.

Screenshots

N/A

Basic example

N/A

Motivation

Enable the user to switch between 2 languages.

Summary

Create a Hero section for the Home page with a CTA button. This should encourage users to start using the website and showcase the website's usage.

Screenshots

This is only an example image of a previous project. Feel free to change the design.

Basic example

N/A

Motivation

We want users to be able to use the website's main feature quickly and show them what we offer

Summary

Fetch all the current user sets and display them on the page so that the user can browse through them.

Screenshots

N/A

Basic example

N/A

Motivation

Allow the user to go through their library and study them.

Summary

Email.js will be used for the contact us page. Set up that and test it so that we can just call a function later on when we set up the contact us page. Make the function live in the src/services/contact.js

Screenshots

N/A

Basic example

N/A

Motivation

So that users can send the team an email.

Summary

A page that allows users to login into the website. Make sure to use react-hook-form for validation.

Screenshots

Basic example

N/A

Motivation

Allow the user to log in to the website to save card groups and add comments and ratings to them.

Summary

This page will give a brief description of the website how it works and why was it created.

Screenshots

N/A

Basic example

N/A

Motivation

We want the users to be able to see an about the website page that describes why did we create this and what is the usage.

Summary

Fetch the data of the currently viewed set page based on the id on the router.

Screenshots

N/A

Basic example

N/A

Motivation

Get the data of the currently viewed set

Summary

Make sure to send the email using the service file we already created adding emailjs in the services/contact directory

Screenshots

N/A

Basic example

N/A

Motivation

Allow users to reach out to the team

Summary

Post a new comment to the firestore when the logged-in use comments on a set

Screenshots

N/A

Basic example

N/A

Motivation

Allow the user to post comments to the firestore and display them on the page.

Summary

Extend the tailwind with the required colors and fonts.
Ideally, the team should vote on the colors otherwise use this:
primary: #3A86FF
accent: #8338EC
black: #1A1A1A

For the font let's use what tailwind recommend Inter

Screenshots

N/A

Basic example

N/A

Motivation

Being able to use color as primary-[grade] and accent-[grade] will be huge help so that if we change them in future, we only need to change them in one place.

Summary

Website Footer should provide social links to other platforms, ex: twitter, facebook, and Youtube.
Also, should provide quick links and access to important pages on the website: ex contact us, about

Screenshots

Basic example

N/A

Motivation

We want a footer that is flexible and showcases our social media links as well as important links on this page.