Frontend mock operating system built with React and TypeScript.
DolphinOS is my (Jeff Qiu's) personal website. Designed to imitate the GUI of a simple operating system, it contains a brief overview of my past experience, links to my social media, and some writings that I did for school or for fun. In the future, I also plan to integrate other side projects that has a front-end into this website.
DolphinOS is my attempt to learn React, then TypeScript, then Redux, then Jest. I am a firm believer of hand-on learning, and a static website with some CSS animations simply does not pose enough challenges. So I contrived a slightly over-complicated design for my personal website to get a taste of what modern front-end frameworks can do.
More importantly, I want to use this project as a learning experience for how professional software engineers approach their work. I try to pay attention to the clarity and maintainability of my code, as if someone else (me) has to work on this project five years from now. Thinking about issues that affect a large codebase maintained by hundreds of professional with such as small personal project may sound a bit ridiculous, but in lieu of a collaborative software development experience one would typically find in an internship, this is the best I can do.
I reflect on and apply the tips I've learnt from books and the internet to this codebase. These tips can be as big as design philosophy or as small as code styling. Regardless of scale, I use this project as an opportunity to experiment on the best practices that I found too fragmented to memorize.
Here are a few examples:
TODO
The project is build with Create React App.
- Install dependencies:
npm install - Build:
npm build - Test:
npm test - Run development server:
npm start
- Improve Mobile support
- Dark mode
- More tests for individual components
- Add more fun stuff
- Software Engineering at Google: Lessons Learned from Programming Over Time by Titus Winters
- Google TypeScript Style Guide
- Project Example: Shopify/polaris-react
- React component design priciples
- Test principles
- Test query selector with
data-testid: "The core issue is that the relationship between the test and the source code is too implicit. We can overcome this issue if we make that relationship more explicit." - CI/CD for frontend developers