Aldhaneka

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.

Make the Dashboard is accessible for everyone!

Show metadata variable that connected to parameter in file integration tab

This is the final preview of my 30 hour hackathon project along with my 3 friends. I was entrusted as the Front End Engineer, I made the dashboard authentication and also the pricing engine form.

Add Copy Code button

Fix Block Preview Video & Images : Migrate to Slack CDN using Hackclub #cdn

Add Confidential Access Page

Add Copy Dependency button which allows user to copy required dependencies to use current block. I also add button to view the source code of the block which will direct user to the github source code of the file

Add different variations to the UI

Add feature to show products from other marketplace!

Scanning a whole through website to load the lazy images

Add generated keywords variations for Block Category and Individual Block page for SEO

Add generated SEO Metadata on each block page (generated static site).
- Next up im going to add SEO Metadata on each block category page

Add pricing comparison along with contributor

Merge PR from contributor, and also improve the site experience & performance

Simple UI, during this 8 hours I also made some scripts to scrap a marketplace data

New Layout and adding new tab, however the issue is that the current pop up window closes.

First devlog and layout for my extension!

Add Copy Dependencies button, this let users to copy required libraries to install—such as framer motion, radix ui—and also required shadcn components, therefore user only need to paste it onto their terminal to install the required dependencies.

Add syntax highlight and style on the block's source code codeblock

Add copy to clipboard functionality to copy the source code of block

Add arrow key feature in command navigation, so you can navigate between block by pressing Command + K then using the arrow keys ↑↓!

Add 5 Confidential Access pages, this components is more easier to make compared to making the components for pricing section.

This pages mostly used by Fullstack Webapp Dev to make their internal tool for the company.

The pricing section kinda complex and give me a bit dizzy, so after I work on the first pricing comparison block, now i work for this block to show state of confidential page.

I add navbar to the block page

I'm currently building for the Pricing Blocks! There will be pricing components released on the web!

Searchbar feature to navigate between blocks page!

I add the blocks data to the command palette, so it's now much easier to navigate between blocks!

Add this glass effect command palette

Add search bar, this will soon open up a modal to navigate between blocks.

Just added this footer block into the site!

Make dots background

Add expandable in viewing video demo and also block component!

Add Responsive View for Block Page! Here you can see the block component in different views; desktop, tablet, mobile, or even a custom width you want!

Play a video demo of components when cursor hover

Complete the Icons for this sidebar.
- restructure the source code so therefore the blocks category is in separate page
- restructure the layout
- improve website performance

Hello all!
Finally, after hours of dedication, the foundational website for this project is nearly done. I had done so much by adding more shadcn blocks (reactjs components) like Dashboard Bills, Auth Components, Systems Monitoring components and more! This is entirely Open Source project so you can add your blocks too!

Made with NextJS & Shadcn UI component.

Introducing!
Open Source ShadcnUI Blocks for ReactJS, shadcn components has been gaining popularity in the last 2 years, however it's still quiet hard for Fullstack Developer to find great (and free) shadcn blocks for their dashboard app. Therefore with this Open Source project, I want to help other fullstack devs to be focusing more on developing the app rather than spending too much time in front-end side.

This project is still on going, and many more blocks will be added!
I'd be glad if anyone interested to contribute, you can add more blocks or even improve this project code base!

Made with love from Indonesia!