It's been a hot minute since my last post here! I've been buckling down (and drinking a lot of coffee) amid a slew of job applications and interview preparation, but it's been incredibly rewarding to see my skills and abilities develop with each passing day. That said, it had been quite a while since I had built a substantial project. Sure, following along with a tutorial can be a great experience, but there's nothing quite like getting your hands dirty as you build something from scratch. Check out this project's ReadMe for an in-depth look at my development process and some snippets of code that I think are pretty nifty. Otherwise, look below for a brief overview of this experience and some lessons learned.
mgtz505
/
dev_companion
Dev Dashboard is a React SPA designed to keep you motivated and focused on your coding
Welcome to Dev Dashboard
Dev Dashboard is a productivity application to help developers stay focused while coding. I began building Dev Dashboard after reflecting on which "simple widgets" I used on a regular basis while programming (namely text editors, a reminder/to-do app and a pomodoro timer) and deciding that bundling these applications into a single web-app would make for a great project. It's been great to see my front end development skills evolve over the past several months, and while I know that I'll be making more projects soon, working on Dev Dashboard felt like a great measure of my progress.
How does Dev Dashboard Work?
Dev Dashboard is intended to be a pinned tab in your browser! If you have a multi-monitor set-up, it's a perfect page to keep displayed on an auxillary screen while you're working. All widgets are simultaneously available for your use. Use any widgets that…
A snapshot of Dev Dashboard
Dev Dashboard is a productivity application to help developers stay focused while coding. I began building Dev Dashboard after reflecting on which "simple widgets" I used on a regular basis while programming (namely text editors, a reminder/to-do app and a pomodoro timer) and deciding that bundling these applications into a single web-app would make for a great project. Dev Dashboard is intended to be a pinned tab in your browser! If you have a multi-monitor set-up, it's a perfect page to keep displayed on an auxiliary screen while you're working. All widgets are simultaneously available for your use. Use any widgets that you think can help you be a more productive developer.
A brief review of my development process
I had a blast building this project. I tinkered with some new technologies, brushed up my experience with testing, and continued to improve my front end development abilities.
Styling
All widgets were effectively treated as independent apps, utilizing CSS modules for styling and state siloed to appropriate components. Simpler widgets, such as the pomodoro timer, served as a useful template for skeletoning out potential layouts for the more complex widgets.
I selected the project's color palette from Coolers.co and additionally added #7b5673, the inverse color of the app's most prevalent background color, #84A98C. Low-fidelity (essentially just containers in greyscale) wireframes were constructed in Figma. I knew that there would be some inevitable scope creep in this project. After all, once the creative juices are flowing on a project you're developing to help make you a more productive programmer, you'll inevitably come up with some new features to integrate. As such, these wireframes were much more useful with helping design my layout rather than guiding styling decisions for any individual components.
Utilized APIs and Additional Node Packages
In addition to requesting data from various APIs, Dev Dashboard additionally relies upon several node packages, namely react-codemirror2 (used in Javascript Scratchpad) and react-calendar (used in the Reminder widget).
I knew from the get-go that I wanted to incorporate GitHub's API in this project. I chose to build a commit tracker as this is the GH page I often find myself checking while working on a more extensive project. Should a user decided that they want to see a given commit's code changes, they can follow the provided link to their commit on GH.
I had previous experience using the NYT API for a prior project NYT Best-Sellers and found it a lot of fun to work with. When I'm taking a work break I'm usually browsing the news, so this was a no-brainer API to integrate into my application. After a user selects a category of news via the dropdown menu, axios calls the API and returns an array of objects, each of which contains 25 stories which are then mapped.
Testing
This was my first experience using unit tests throughout the development of this application. I had experience writing simple unit tests for vanilla JS using mocha, but had yet to to try and implement unit testing in a React application. I initially tried to use Mocha but ran into issues, namely I was unable to use babel to interpret my JSX (a big issue considering what babel is meant for). As such, I pivoted to Jest. Testing with Jest was a great experience. Check out my repo to get a peek!
In Retrospect...
I'm committed to continuing to grow my abilities as a software engineer. Moving forward I want to ensure that I'm reflecting about my experiences as a developer, and importantly, setting realistic and achievable goals for myself.
What did I do well?
- Strived to write efficient code (tried to eliminate any code smells, particularly with data not being mapped, not utilizing props, etc)
- Frequent and descriptive commits
- First major project that didn't utilize a component library; there's certainly a time and place for them, but it was great to hone my CSS further and do all styling from scratch
- Learned how to use new APIs and didn't shy away from thoroughly reading the documentation
- Happy with my App's file structure / architecture; I believe that I was well organized and methodical with my layout and code structure throughout this project
What Can I do to Improve on future Projects?
- Be more willing to fail when developing; I think that using a dev branch or branches for various features I'm developing would be conducive to this
- Worry less about styling until the entirety of the app's components have been placed and are functional (MVP)
- Perhaps giving CI/CD a try; I could have easily deployed the project's MVP, or even the app when there were only several completed components
- In hindsight, I jumped around between components more than I should have; moving forward, I'd probably benefit from defining a component-specific MVP and
How can I continue my Momentum?
- Become increasingly comfortable with continuing to use new APIs
- Perhaps try using a styling library or new CSS framework such as Tailwind CSS
- Learn more about wireframing / prototyping and perhaps try implementing high-fidelity wireframes at some point
Actions for Next Time
- Develop on a separate git branch
- Try using a CSS framework
- Continue using new APIs
Top comments (0)