Web OS

Why this project?

To get more familiar with searching through a JSON file and improve my react skills.

Thought having a virtual filesystem was a fun idea.

Why the tech stack?

To improve my react and tailwind skills, and quick developement with nodejs+express and redis.

Challenge:

Using mobile features effectively. For example, checking if the user is going from right to left, or left to right, then swipe the desktop page and not have that interfere with other features.

What I would add:

User login system so the filesystem can stay with the user. Add either postgres or mysql to store the data.

Add more features within each app. For example, add more commands to the CMD app, enhance collaborative feature in notepad and paint, etc.

Add more apps in general, like singleplayer/multiplayer games. Possibly add an emulator.

DSA Practice

Why this project?

To showcase my progress in leetcode.

Why the tech stack?

I chose a full-stack framework like Next.js for its built-in routing, API support, and server-side rendering. Pairing it with TypeScript helped catch errors early and kept the codebase maintainable.

Although I had no prior experience with Next.js and only a basic understanding of TypeScript, building this project gave me hands-on experience. I'm still learning, but I now have a strong grasp of how both tools work together and individually.

Challenge:

Working with @monaco-editor and vm2. The tests were generated by chatgpt and gathered from leetcode, but problems have different parameters and I had to figure out how to spread the parameters correctly. In short, I overcomplicated it.

What I would add:

As of right now, I have only completed easy leetcode problems. In the future, I be doing medium and hard problems. This means the tests will need to be categorized accordingly.

Another thing I'd like to add is the choice to use a difference language. Languages I want to answer these problems in are Python and C#.

Invoice Generator

Why this project?

My brother started his electrician company and wanted his own invoice generator.

Why the tech stack?

My brother plans on having employees in the future, where they could have android or ios phones. React Native deploys to both, and I'm also comfortable using React already.

Challenge:

Learning react native at a deeper level as I only learned the superficial layer of it in school. As well as using a UI library and several 3rd party dependencies.

What I would add:

Job scheduler, different tiers of quotes, an improved website for the client to view the quotes, role based auth as his employees should only have access to certain endpoints.

Portfolio

Why this project?

To showcase my experise and skills in what I've learned in and outside of school.

Why the tech stack?

Faster initial load time, no external dependencies, to deepen my knowledge in web developement fundamentals, and to have full control.

Challenge:

Adding in animations with css and javascript. Learning more about canvas usage was really fun.

What I would add:

My next project is to create a 3d portfolio, but allow the user to toggle between 2d and 3d.

Multiplayer Chess Game

Why this project?

To learn more about how web sockets work and harden my skills in MySQL

Why the tech stack?

To harden my knowledge in the stack while using the socket.io library.

Challenge:

How to store and use web sockets effectively.

What I would add:

A better bot system and a better structure chess system to make the development of the "AI bot" algorithm easier/advanced.

Social Networking

Why this project?

To prepare myself for the upcoming school term.

Why the tech stack?

In my upcoming school term, we were going to use this stack.

Challenge:

Since every language was new to me, it was learning all of them individually and also how they work together. After playing with each language, they all became one of my favourite for its use (React:Front-end, Node.js:Backend)

What I would add:

Socket.io, so the users can message/chat with other users.

Sorting Algorithm Visualizer

Why this project?

To improve my data structure and algorithm knowledge. Was also a gateway into my next project so I can improve best move calculation speed.

Why the tech stack?

After spending time with the Social Networking project, I was familar with react. I grew a liking to the framework and wanted to apply what I learned.

Challenges

Learning new algorithms, as well as timing the intervals with each interval. The biggest challenge was displaying the sorting in a timely matter. This allowed me to learn more about the inner workings of the algorithms.

What I would add

Colour any bar that the algorithm is looking at and colour the bars that are already sorted. As well as being able to sort other data sets than just integers.

Chess Game

Why this project?

At first, it was to test my vanilla javascript skills and make a game at the same time. Quickly into making the project, I thought about adding socket.io for players to play against eachother, as well as an AI the player can play against in either easy,medium, or hard mode. Found out very quickly I suck at chess.

Why the tech stack?

To test my vanilla javascript knowledge since my previous two projects were written with React.

Challenges

Learning chess. The more I learned about chess the more complex the project became.

What I would add

Socket.io so two players can play against eachother. As well as a system that allows the user to gain points with each match they play, so they can earn enough points to purchase a chess set that they can play with. There are currently four chess sets for both black and white.