SAT Practice Platform

After more than 2 hours combined (from previous 2 devlogs), I finally able to make a separate UI to review completed session and in-progress session.

There are actually lots of bugs fixing during this 1st hour, but one of the thing that clearly changed is that I move the timer.

Fix the MathJax Rendering

Modify the SAT Resources page, add KhanAcademy & CollegeBoard logo

Add difficulty level to the card

I add a feature where user could view their answered questions. Btw I'm using localstorage to save user data.

Add UI to show a state that question not found. (/question/{questionId})

Add feature to load the saved question!

I add feature which allows user to review their past practice session!

I add section in the dashboard for user to view their previous practice sessions

I make a page for user to search exactly based on Question ID (without having need to filter out things)

Add 404 Page, I use someone's work dribbble animation taken from this component https://21st.dev/minhxthanh/404-page-not-found/page-not-found

Add button to show a popup of math reference sheet and desmos calculator

I add some stylings to the question card!

I add a page to directly view a question's problem based on its questionId

I make an API Route which let me to fetch a question and its problem based on the questionId. CollegeBoard API doesn't have this—they user another Ids which are either external_id or ibn to fetch the problem of the question.

Simple Dashboard UI (not finished)

FINALLY AFTER 2 HOURS OF DEDICATION!!
I added a feature where user could continue their last practice session! There are A LOT OF BUGS and DEBUGGING I encountered.

I add a feature for user to share their practice session through link!

Make a banner error when the /practice url has invalid param queries

Add this modal to share URL Practice Session

Add tooltip to each button on the practice rush session

I make an API Route to show stats of Collegeboard's Questionbank

I make layout for the Dashboard (not finished)

I add save button therefore user could save the question/problem during practice rush

Add Finish Practice Session UI

I modify the UI style during the onboarding process to do Practice Rush

I make a feature where user able to review their previous answer choices during the practice rush

I add option for user not to show the correct answer popup

I add sound design in the interaction of this app! (I use Material 2 Sound Design by Google)

I add a lot of features in the question rush :
- Multistep functionality (finish)
- Batch systems (it will fetch another 22 questions in another batch)
-Timer feature (with color that highlights the current timer when the user enters the current question)

Add exit button to exit the practice rush session

Implement full functionality for Multistep process for user to choose answer and input an answer. Along with this, I also optimized the whole code by using reducer, so it's more efficient to render the UI

I separate the practice rush multistep functionality into another file

I implement the multi step process in the practice (not finished)

I add styles to the reference pop up, i make it more clean

Add button to show a reference sheet little pop up

SAT Reading & Writing UI, I try to make the UI and the layout to be similar like Bluebook App does have

Add elimination feature to the practice rush

Simple appearance (unfinished)

Render the Maths equation

Modify the API Route to filter out questions based on its difficulties, and skill domains

Add step process to show user its current step process

Add section to choose the Assessment

Add animation to the hero page

Add checkboxes to choose skills they want to practice.

Practice Rush onboarding page

Make a page to choose practice method

Add SAT Resources Page

Make hero section

Make an API Route to get Collegeboard question based on its external_id

Make an API Route to call to the Collegeboard's API to get questions based on domains (Algebra, Advanced Maths, Geometry, etc)

Make an API Route to get the CollegeBoard SAT Lookup Data
(you can access this at : https://pretestsat.vercel.app/api/lookup)

I also implement Cache system to optimize it.