Challenge accepted!

A few months ago, a fellow student told me about the sad situation in her country regarding abandoned dogs on the streets of Romania and how much she wished there was an app to report these poor animals to the nearest NGOs.

At that time I was still a beginner, just a few months into front-end development, and only doing projects following tutorial instructions. I told her that I was not in a position to help her at the moment, but I will definitely try when I have more experience. But that got me thinking and I started prototyping in Figma how the app could work and look.

Four weeks ago, the Clerk x Hashnode Hackathon was announced by Catalin Pit on Twitter and I thought how cool it would be to participate in one of these hackathons. A few days later, at 5 AM and jetlagged (I was traveling to the US for 2 months), I made a decision that I even announced on Twitter: I will participate in my very first hackathon and fulfill the wish of my fellow student. It just felt right to build this project, put all my effort into it, and I was very excited to finally leave the tutorial hell and show my potential in the next 2.5 weeks.

So here I am, an enthusiastic front-end developer with almost 9 months of experience, a degree in Musicology and Japanese Studies looking to get a foot in the tech world and build great apps like this one, participating in my first hackathon.

---

How the app works

The idea of this app is to allow users to report abandoned dogs when they see them on the street by filling out a form that includes information about the dog's condition and location. Once the form is submitted, the nearest NGO will be notified and they will be able to pick up the dog and help it if needed.

Coding the app - stages and problems

Preparation

Since I'm not familiar with any kind of back-end at this point, I'm only focusing on the front-end part. I decided to use ReactJS for this project as I am most familiar with this library. I don't use any framework for styling the app and use vanilla CSS.

I want the app to maintain the size of a mobile version at all stages. Therefore, I've set a fixed size (values taken from iPhone 5) whether you use it on a mobile (which will be the case in most cases) or on a larger device.

File structure

Since there are not many functions at the moment that would need folders like lib or utils, the file structure is very simple:

-- src/
--- components/
----- Condition.js
----- ExtraInformation.js
----- Formular.js
----- Header.js
----- Home.js
----- Location.js
----- Success.js
--- App.js
--- index.css
--- index.js

Coding the app

Authentication

To access the app, the user must first log in. After that, a user profile is created where he can change his personal data or log out. The authentication forms were created using Clerk, an authentication management tool for easy authentication, which allowed me to customize the newly created front-end themes to my personal needs.

The authentication code is stored in the App.js file. The token created by Clerk to gain access as an administrator is stored in an .env.local file.

Different views

After the user logs in, the app is presented to them with a home screen. The functionality of switching between different screens is stored in the Formular.js file and specified in a switch function.

The form itself starts with the component, followed by the component, and is submitted after the REPORT button is pressed in the Location.js component. The last component, Success.js, tells the user that the form has been submitted successfully and returns them to the home view when they click the REPORT ANOTHER DOG button.

Menu bar

The menu bar that appears when the user clicks on the menu burger icon in the left header contains information about the user, about the NGOs involved in this project, and about the app itself. Currently, the last two links do not lead anywhere. The Start-link redirects the user to the home view.

Problems

The implementation of Clerk authentication caused me some difficulties. I guess the main reason is that I lack the time to fully understand the implementation process. I am sure I will be able to fix these issues in the coming weeks.

• I wanted the user to see the home screen first when opening the app. When they click on the REPORT AN ANIMAL button, they should be directed to the login form and then to the actual form.
• Due to the fixed height as well as my implementation of the user button not matching the recommendation, the user popup does not appear in the center of the screen and is larger than the app itself on wider screens.

I also had some issues with the deployment of the app (Netlify, Vercel), which are now fixed.

• When opening the app, nothing was displayed on the screen, and it said that the app cannot access Clerk.
• Also, the app did not render the component with the map that uses the Mapbox API.

Achievements

The front-end is pretty much done. The form is set up, all pages show the content as expected (at least on localhost), wrapped in a nice design.

According to the Chrome extension accessibility insights for web, my app is fully accessible. It is very important for me to meet all a11y requirements. If I missed something, please let me know.

I managed to create a favicon that you can see in the open tap of my app, as well as add some meta tags for better accessibility (SEO).

I created a README file and tried to explain the project as well as possible. I created Issues on Github for all the missing parts or parts that need to be changed, which are listed below this paragraph. This ensures I stay consistent and don't forget anything I wanted to do in this app.

Code and live view

Take a look at the app by clicking here.

Take a look at the GitHub code.

Changes and what's still missing

• The map should show the exact location of the user and when clicked, the location should be automatically entered into the input field in the input field of the form.
• Registration should be optional. This would likely encourage people to report a dog in an impromptu situation.
• A footer should be created to store the buttons to avoid DRY (now each component stores two buttons and two functions to count the next and previous steps).
• The Success.js component could be a modal that appears above the location component when the submit button is pressed.
• The Formular.js component uses a class function to store the states. Maybe there is another/easier way to handle the state when using a functional component.

The backend is completely missing as I am not familiar with the backend yet. There will be a lot of things to do when coding the backend:

• The data should be stored in localStorage, so it will still be there when the user clicks the next or previous button.
• The submit button should actually send the form to a server.
• The data should be stored in a database, like Google Firebase.
• The links in the menu bar should point to the relevant page.
• Clerk backend functionality should be implemented.
• The app should be properly tested (Jest, React Testing Library, Cypress).
• NGOs should be contacted and involved in the project
• Pages and paths should be created for all components (e.g. /home, /step-2)
• As the code gets bigger, the folder structure should be adjusted (utils, libs,..)
• To write clean code, TypeScript should be used
• To improve the performance of the app, async/await functions should be used, error and load handling should be implemented, ...

---

Future ideas and dreams

As the app progressed, other ideas came up. It would be great if the app would help not only abandoned dogs but abandoned animals in general. Different countries have different problems. NGOs around the world should be connected to the app so that animals can be reported from anywhere in the world.

The benefit to a user who signs up could be that they can stay in touch with the NGO and receive updates on the dog's condition if they are interested. There could also be a list of all reported animals and the possibility to adopt one, if possible. For this, a good and simple authentication system, such as Clerk offers, would be beneficial.

Overall reflections

Participating in the hackathon and working on this project has been a lot of fun for me over the past few weeks. The community has been great, inspiring, and very helpful - something I'm really enjoying on my journey to becoming a web developer. Programming makes me stay focused and consistent, and the excitement and joy I feel when I see the result makes me want to continue this journey for as long as possible. Thank you for this great experience, Clerk x Hashnode xoxo.

---

Thanks for your reading and time. I really appreciate it!