Hi! I’m Will, the front-end engineer for our web security project, Bluepeak Bank. This initial post is to summarize a couple sprints worth of work, so it may be a little bit longer than my average post here. In general, I’d like to try to keep things short and sweet, to give more of an overview of what we’ve been working on for this project.
For the front end of our web app, we are using React with Vite. The set up for this was a breeze, it just started with running $ npm create vite@latest in the command line interface. The CLI integration for starting a project is super smooth and nice, you just have to enter your project name, if you haven’t already given that argument, and then select your framework of choice:
I selected React, the Javascript variant, and the project was spun up in a new local repository in just a few seconds. Building the front end out from there has been really fun using this framework, and with experience gained from building similar projects in my other classes, the learning curve is really not too bad.
We are also using Tailwind.css for styling, and that has been surprisingly easy to work with. Like most front end developers, my biggest gripe is managing CSS styling. I do have feelings about the inline styling components of the framework. However, some of the bloat that exists in our HTML now will be mitigated when I have the chance to break our pages up into more reusable components. Also, it’s hard not to have feelings about any choice for managing CSS in a project. There’s really no perfect solution.
Here is a great article by swyx on Why Tailwind CSS.
It’s not perfect, and still needs work, but here’s what I came up with for our homepage:
Other highlights of the last couple of sprints of our project for me (some of these may require their own posts in the future) include:
- Learning how to use Docker to manage and spin up development instances of the database, api, and front end.
- Managing routes and their interactions with database controllers and middleware
- Fiddling with js styling, and working out my preferences on styling as a front end dev. For now, I’m using Prettier, but I’m not sure I’m entirely in love with how it indents styling and HTML within my .jsx pages.