My First React Project

Davemills
3 min readJun 11, 2021

--

I started my react app by building a gardening app from the ground up. The first line of code was simply ‘npx create-react-app my-garden’, and I was off on an adventure that I had no idea would take so long. I included pictures and different routing to various sections such as “About Me”. The problem was, it did not include an API or an external back-end. This is the second phase here at Flatiron. I wanted to do something to show my friends and family, all of whom love to garden. However, because I did not include everything that was required I essentially had to start over. The Garden Project just did not involve much user interface or anywhere for views to interact with.

Technically the first react app I made was this, but it did not meet the requirements at Flatiron.

So there I am, day of assessment doing a project over. I was given the ‘OK’ to use the Gardening Project and just add a JSON Server and mock back-end. I just couldn’t really figure out what to add that would make sense with the site. I decided to do something almost all newbie coders have built, A Task Tracker. I called my project “Important Task Tracker” to be somewhat unique.

DEMO for the blog — adding a new task

I found a simple CSS template to base what I wanted my app to look like. Because I had already completed one mock site, I figured this would be easy. I mean come on, how hard could a simple task tracker be?

It wasn’t long that I found myself on stack overflow with more errors than any other time in my coding career. I considered giving up altogether, I considered that maybe this isn’t meant for me. Honestly, one of my main frustrations was with Importing, Routing, and JSON Server. I could not wrap my head around setting up the JSON server. After many hours of Youtube videos, I finally had a working application. The frustration wasn’t over, it just switched form one thing to another.

One annoying issue that I ran into was that two of my files were named so similar, that I confused the two often. File name’s were named “Task” and “Tasks”, so you can see how this will get confusing later. Overall, I believe this is a normal way to code, however, it was something that made me frustrated as it was something so easy. Lesson learned; always check your code syntax to make sure there aren’t errors.

This is the entry form to add a task, notice the color of the “Add” button changed to red and also text updated to “Cancel”

The App itself was supposed to be as easy to use for everyone. The app has a simple yet modern border and the text is big enough for most to see. All the design is based on ease of use. I want anyone anywhere to be able to access this app. My goal is to create apps that are already in existence but make them easier to use and straight to the point. Eventually, everyone will have a smartphone. Having apps that can be translated to any language and instinctually used without much direction is a key component I am aiming for in all my designs current and future!

In the future, I would like to add a few more features. I think combining weather, current time, and the tasks you need to be done would be a one-size-fits-all app. Having a dynamic background that displays current weather conditions like rain, or clouds would also be fun additions.

About page routes back to the “home” page by hitting the “Go Back” button

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Davemills
Davemills

Written by Davemills

I am studying software engineering at Flatiron. I plan to work with companies interested in a sustainable future.

No responses yet

Write a response