Hi!
Welcome to Oh, that bridge!, the page which aims to gather bridges from all around the world.
I'm very happy you've stopped by :)
This is actually the 2nd version of Oh, that bridge!, but the reason to build it hasn't changed - to learn new things, to improve code, to write better and cleaner. The first version has been released in March 2018. It focused on picture presentation and bridge locations (it has a Google map with markers implemented). I've created it because I wanted to better understand how React hooks work and how can you use them in GraphQL queries. It was also my first application with a public domain :)
In this 2.0 release I wanted to focus on several things:
- Animations and overall reception,
- User experience (I wanted to make it scroll-less, but after a while, I resigned),
- Simple and fast search mechanism
- Simpler maintenance
- Server side rendering
- SEO optimisation
- Improve my designing skills
I hope you have noticed at least one of these things :)
I have already mentioned some technologies, so maybe let's take a deeper look into the tech-stack:
- React with TypeScript - I've been using TypeScript for a year now and I don't believe I would ever go back. The project is not complex, so I did not have to define many types, but anyway, it makes me feel comfortable.
- NextJS - Since I wanted to focus on SEO, NextJS was a natural choice. It turned out to be super programmer-friendly and also provides lots of optimization tools. So I did not have to care about the image optimization in order to keep the performance on a high level.
- Firebase with Firestore - Firebase is a great solution since all I have to do is to handle the requests in the NextJS API. In case I go for version 3.0, I'll already have the data :)
- Algolia - this wasn't planned, but I realized it would be good to make a pleasant and friendly search. Since algolia is recommended (by firebase) search and discover platform I decided to give it a shot. I'm very happy with the result :) (but also, I only perform a simple search)
- Framer Motion with React Intersection Observer - at the beginning of 2021 I've seen my first video with Framer Motion. It seemed so simple and so powerful and I had to try it. I am not really sure yet what's the best way to build components using it, but maybe after a few weeks or months, I'll squeeze it somewhere in a project structure. React Intersection Observer works with Framer Motion out of the box! So you can achieve astonishing (or simply - nice) results with just a few lines of code. This is actually something I'm going to certainly remember from this project.
- Atomic CSS with Styled components- huge credit to my work colleagues, who introduced it to me. It makes to project structure much cleaner and since I'm using styled-components I cannot think of a better pair.
The entire code base is available here: barlima/oh-that-bridge-v2
Feel free to take a look, leave a comment or report an issue.
Hope you will find your bridges here!
Bartek Perucki