DSAmazing is a hobby side project which aims to help students understand the construction and methods of data structures common to computer science.
Learn more below, or check it out here: https://dsamazing.netlify.app/
Translating an object-based data structure into a visual, interactive interface was a great challenge. I made heavy use of useRef() in order to associate ui elements with their respective DS nodes, which allowed me to add or remove nodes with slick animations to keep the user engaged.
This was my first time trying Tailwind, and as a semantic CSS purist, it took several days of grumbling before it clicked. Now, I love Tailwind. Who coulda thunk?
Really enjoyed using Next.js for this project. I look forward to using it in future projects, it's a big step up from create-react-app.
DSAmazing is at an early stage. As time permits, potential future features include:
- More data structures, of course
- More visualizations to demonstrate exactly what is happening when a DS method is run
- Fell in love with Next.js
- Got cozy with Typescript. I can't imagine ever using vanilla JS again!
- Learned the ins and outs of Tailwind
- Figuring out how to translate object-based data structures into an interactive, visual interface was a great challenge
Take a look at these other awesome projects from my portfolio!
Magic Task Timer: https://github.com/ramblingadam/magic-task-timer
Animal Crossing: New Horizons Database: https://github.com/ramblingadam/acnh
X-Wing VS TIE Fighter: https://github.com/ramblingadam/tic-tac-starwars
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.