My capstone project

Back when I was learning tons and tons of new things in the bootcamp, I got to put my new knowledge into practice with a dedicated captstone project. It's part of the neuefische approach of the bootcamp: First, you get about two months of "pressure refuelling" (HTML, CSS, JavaScript, React, Node.js, Frontend, Backend - you name it), then 3-4 weeks time to create your very own app. The capstone.

My personal topic

Before starting with the bootcamp, I had no clue what kind of app I wanted to build. I just prayed that I have the right thought on this topic in time. I did eventually, and the idea came from a personal space.

Not sure if you know, but it is estimated that up to 50% of Germany's population is more on the introverted side. Still, at least my feeling is that we live in a quite extraverted world. It just seems to be much more present. Perhaps that's the nature of things. Though, I have to admit, I struggled with it for a long time. Especially as I did not properly learn about introverts and extraverts until late. But when I did, it put so many things in perspective.

So, I realized Seelenleben based on my wish to cultivate increased exchange between those human beings that are more introverted and those more extraverted. The user can easily find out if s/he/* is more on the intro- or extraverted side by going through a list of statements. In the interest of boosting understanding and eventually promote further appreciation, the user additionally has the possibility to note down topics and situations s/he/* would like to discuss. These can be seen by everyone as they fill a database - and eventually, people might find out more about how one reacts in those specified circumstances.

If you like, you can try it yourself in my demo version of the app, just click here: Seelenleben. (Note that it is optimized for mobile usage (iPhone 6/7/8), so please switch your browser to responsive mode, or open the link on your phone.)

My approach to create the app

Creating my Seelenleben app basically was divided into two parts: designing it and programming it.

Scribbles and Wireframes

After noting down my first ideas of what I want to do, at some point it was time to scribble down some frames. I did quite a few versions. However, I found it difficult to draw them in a way that reflects proper paddings, margings, gaps and sizes of the elements. That is why I decided to create my frames with Sketch.

I really liked that - especially as those frames looked like a proper app already. I also used Crystal Sketch Mirror for my Android phone and swiping through the screens (as static as images are), I was proud of it already: not a single line of code written at that stage, but it already felt like an accomplishment.

Bonus: My design was in place. I knew where which element was supposed to go, which colours to use - this seriously made the following work so. much. easier. For real, it's a life changer - Think about design first, then implement it, play around with Flexbox and Grid and everything. (As you can imagine, it didn't mean that I did not change anything at all while working on the code. In the end, it was my app and thought-in-process during that time.)

Scrum and User Stories

As a group, we facilitated Scrum project management with daily stand-ups to keep us up to date about tasks we worked through for each of our apps. I wrote down my user stories in the GitHub board to keep track of the implementation of my features, noting down value statement, description and acceptance critera as well as my tasks to get there. That was quite helpful as I was able to structure my work, stay on track but not get overwhelmed with anything.

My Tech stack

I realized the app with (you guessed it) React. Create-React-App to be precise. Using it for my very own project, figuring out solutions, reading documentations, google, discussing with my "colleagues" and coaches - all of this helped to lift my (at that point still only short-term memory) knowledge of the first two months to a new level.

I loved (still do!) running against obstacles and finding a well-working solution for it. Oh that moment, when the CSS-animation of the scale on the results-page was working. I tried so many different approaches: some didn't work and some worked, well, the wrong way (like, filling up the scale from top to bottom, but I wanted it the other way round!) - until it finally displayed as intended. What a bliss.

Some features didn't make it to the final version. I played around with some animations and libraries, but dismissed them eventually. Like, you know, when something doesn't work as you imagined, but you only find out during implementation? Or the usability doesn't seem to live up to your standards. For example, for the index page I used a different gesture to go through the icons at first, but after creating the swipeable cards with the topics (I used React Use Gesture and react-spring), I felt it was only reasonable if the user can use the same gesture on the first page, too. The other one just didn't feel intuitive.

Writing JSX, creating custom hooks, using prop-types, styled-components, React Router, Storybook, testing with React Testing Library, Jest and (fun!) end-to-end with Cypress - I was able to try, fail, and conquer on a wide variety of topics.

And I didn't yet mention the implementation of Database and Hosting with Firebase. Oh, and LocalStorage - that was giving some headache and I was relieved when it finally was working.

My accomplishment

All in all, I am still pretty happy with the outcome. Not only with the outcome, but also with the process. Building this app helped me to understand topics better, which at first were a "heard it but don't get it" kinda thing (you know? Things you have to take for granted at first, until you build an understanding to actually grasp it?).

I like React. I think it is powerful. And, as of today, made it relatively easy for me to work with Gatsby and React Native. It's something I want to continue, there's more to come... and as you know...

The future is bright.

NB: I kinda do unpaid advertising here. I don't get anything for it. It's just part of my story.