Inspiration
I finally decided to create a blog as recommended by my bootcamp instructors (slightly over?) one month ago! However, I also wanted to give my self a challenge to strengthen my fundamentals with all the technologies I've learned.
This project was a real awakening after dozing off since I graduated my bootcamp in December - over 12 hours of work a day for two days straight! While that may not be impressive to the norm, I'm very happy with my product as this is my first-ever hackathon.
What it does
DC-Blog is a blog-pomodoro-personal website that is fully responsive (inspired by leerob.io). The website includes blogposts and goals served by the Contentful CMS I created for this hackathon. There is also a pomodoro technique page and an info page.
How we built it
Since I wanted to strengthen my fundamentals, I built the entire website from scratch using React, Next.js, and Contentful. I planned out the wireframes a day in advance and tried to stick to them as well as I could.
Challenges we ran into
The number one challenge was figuring out how componentized I wanted the website to be. At times, I felt like I did not componentize enough and at others I felt like I componentized everything. However, I have a much better idea of what to break down now.
Also, I struggled a little with figuring out the correct CSS classes but managed to pull it all together in the end for a clean, accessible design.
Accomplishments that we're proud of
Overall, I'm proud of how clean the code is (barring some messy Tailwind CSS classes) and how componentized I was able to make the architecture. I am also really happy with the look and accessibility of the website, especially the dark mode toggle.
My main accomplishment is coding the pomodoro technique page almost purely from documentation (with design inspiration from pomofocus.io).
What we learned
While this was not the next big thing nor an innovative solution to a complex problem, it was what I needed the most - a strengthening of my fundamentals. I'm much more confident with the main React hooks as well as Contentful's CMS.
What's next for DC-Blog
Future improvements include improved code readability and animations.
If you would like to check out my future progress, click here for the repository!
Built With
- contentful
- css3
- graphql
- html5
- javascript
- next.js
- react
- tailwindcss
Log in or sign up for Devpost to join the conversation.