Hello world 🎉! (This is my first post here)
So, what is this post about?
Well, it’s about me and what I learned from making a personal project for my portfolio page. I don't see posts like this on dev.to, so I thought posting this could be interesting. I want to share what I learned with others and also get some feedback and criticism. I hope this article could be useful for others who are trying to start their project.
What did I make?
I made a simple bike rental website with React and Firebase in "11 days".
Links:
Originally, I tried to limit myself to only 7 days of design and development, but the whole process took about 11 days. Why did I limit myself to 7 days in the first place? So I can be sure the project will be "Done".
Additionaly, I also wanted to try a couple new things in this project:
- Creating a language switcher using i18n (I have never implemented a language switcher before)
- Integrating Storybook into my workflow
- Trying out Vitest and Playwright
Feature & Design
In the original plan for this project, I didn't intend to connect the website to a backend or external API, but in the end, I decided to connect the project to Firebase.
But why did I connect it to Firebase? So I can say "Yes, I can connect the frontend to API endpoints", when someone asks about it.
Features of the project:
- Language switcher
- Booking Form
- Cart and checkout form
- A bunch of static pages
- A map showing the store locations (dropped due to time constraints)
Before going further, I just want to say that the ride-ride website took inspiration from:
The image above is the 'final design' on Figma. I went through a couple of layout changes for the homepage and form page when designing the website.
Challenges I Faced When Designing The Project
Finding Images is Hard
I never thought finding images for the website would take more than 1 hour, but I was wrong. In total, I think it took me about 8 hours just to find all the images used on the website (All images are from Freepik).
I need to figure out a more efficient way to get illustrations into the design.
I Suck at Making Forms
I would have never expected to have difficulty in making the form.
I tried watching a couple of YouTube videos to help me design the form, but I think the root of the issue is not about the UI/UX of the form.
I think the root of the difficulty is how the business function and requirements is not clear to me.
- Can users book multiple bikes at different times and locations in one order?
- Can users just book a tour without booking a bike and bringing their bike?
- Etc.
Business questions like those are quite difficult for me to figure when making personal projects like this since I am not well-versed in the bike rental business (or any other business really).
The form I designed reflected my lack of knowledge in how the fictional bike rental business functions.
Understanding the underlying business/real life problem is crucial when designing software (sounds obvious, but sometimes I forget this)
There Is More To The Homepage Than Meets The Eye
At first, I thought designing the homepage was as simple as putting a bunch of images and writing some text about the business.
But the more I think about the homepage, the more I realize there is more to the homepage than just the looks. I think the homepage is like a businessman pitching their product to a customer. Just like a businessman, the homepage should be able to tell a story of how the product is able to help the customer, and answer any doubts the customer have about the product.
Some questions that came up when I was pondering about the homepage:
- Does this tell the customer about our products/services?
- What information do the customers want to see first on the website?
- Does this show the value we provide to the customer?
- Is the user able to quickly get the information they’re looking for?
- How to get the customer to keep scrolling?
- Is this enough to answer the customer's doubt?
As you can see my design of the homepage is unable to answer many of the questions that came up. This experience has recontextualize how I think about website homepage.
There is purpose in design
Development Process
Now here is where the code come into the story. For the most part, I would say the development went well. However I did encounter some challenging scenario that showed me that I still have much to learn in software development.
Challenges I Faced When Developing The Project
When There is a Deadline, Clean Code Comes Later, and It's OK
Since I gave myself 7 days (which turned out to be 11 days), I tried to code without thinking too much about 'clean code', which caused the codebase to have duplication and inefficiencies, but I'm okay with that. In fact, it was probably one of my most productive coding session in a while.
This might sound like I don't care about code quality. But hear me out for a bit, I think it is okay to create a ugly code that works first and clean it up after the code works. All that being said, there are still a lot of code to clean up in the codebase, and I am not satisfied with the current state of the codebase.
Solve the problem first, clean can code comes later (hopefully)
Working with Storybook
One of the thing I wanted to try out is to to integrate Storybook into my workflow. It was a quite different developer experience when using Storybook.
Setting up Storybook is alright, I just followed their documentation and somehow it works.
After trying out Storybook, I can see the appeal of using it in the development process. Storybook allowed me to develop and test components independently, so I can truly focus on the component and be sure that the component works. Its kinda like having a unit test for your component.
But, I can also see situations where using Storybook could become more work. During the project, I can definitely feel a laziness to write stories, since it is ultimately more code to write. From this project, I think testing an entire static page in Storybook only brings a small benefit since you can just open the page in the browser.
Overall, I can see the value Storybook brings to my development process, but I still need more hands-on experience to see if the code I write for the story is worth the effort.
Storybook, it's pretty cool. Still need more hands-on experience
About The TDD
Originally, I wanted to try Vitest and Playwright for this project. However, I ended up uninstalling both Playwright and Vitest. There are three reasons for me uninstalling, all three stem from the lack of experience (I think):
- Writing test took up too much of my time
- I'm unsure of what to test in the frontend
- I'm unsure if the test I write is correct
This doesn't mean I don't see Vitest and Playwright value in the development process. Due to my lack of experience, I opted to not write tests at all instead of writing nonsensical tests.
I'll definitely try using testing library in my future project, and give myself a longer time constraint so I can learn it properly.
I need to learn more about TDD and the testing library
Things That Went Well:
The i18n Setup Wasn’t so Bad
Setting up i18n is not as difficult as I thought, granted I'm pretty sure my i18n setup is 'janky' at best. Well, everyone has to start somewhere right.
ChatGPT is Great For Making “Filler” Text
I used ChatGPT for almost all text generated on the page. Why? Because it saves a lot of my time, simple as that. Did I proofread the text? sometimes.
What Did I Learn From This?
- Having a clear idea and understanding of the business process is critical to developing a website (or any application)(sounds obvious, but I overlooked this).
- Design process isn’t just about good visuals or good UI/UX
- Design has their own purposes and reason to exists
- I can see the value Storybook brings, but I still need more hands-on experience
- I need to learn more about TDD and how to use test library
Epilogue
Well this is the end of the post, thank you for reading my rambling till the end.
Top comments (0)