Test Application I have done in 2024

Portrait of me, Pavlo LehkyiPavlo Lehkyi
  • node.js
  • react
  • ts
  • job-search

Before I start:

This post will be updated in case I would have time for any additional improvements I’ll cover initially

Also: I create such type of post for the first time, so if you are a recruiter or hiring manager or whoever else who is considering hiring me, I’d happy to hear your feedback about the post as well as code itself =).

GitHub

Intro

Today I’m going to cover the Test Application I made during my job search. It’s a React CRUD application with Node.js and PgSql as a back-end service.

At the moment I write this “this” I have spent 10 hours and honestly feel just ok about my solution. There is always huge room for improvement IMHO. And I hope I’ll have some time in the feature to edit it.

Now let’s take a look on the initial task:

Hi 👋,

Sometimes we hear from companies claiming that our app is so "simple" that they can build it themselves and save money. Most of those who tried have since told us it wasn’t such a great idea. But we want to turn this claim into an opportunity, so we’ve created this small task.

What’s the task?
Please develop an application that works similarly to ours but is as simple as possible. Your job is to program a record management app where users can:

Create alerts (records).
View all created alerts.
View the details of an alert.
Edit and delete an alert from its detail view.
There’s no need to include user registration or login flows—everything can work under a single fixed "account."

The alert should include at least:
Sender’s name.
Sender’s age.
File upload capability.
Want to check out how our app looks visually? Visit https://app.nntb.cz and select “Testovací škola” (Test School).

Technical Details
Please use Node.js, TypeScript, and React for the project, but feel free to choose what you’re most comfortable with.
We understand that using GraphQL + Docker might be overkill for such a small task, so plain REST is fine too.
As for other technologies, like the database (we prefer relational ones), the choice is up to you. Just ensure proper use of foreign keys, indexing, and transactions in your database design.
What's important to us: understanding why you chose the tools and technologies you did.
What are we looking for?
Please focus on:

Clear and readable, well-typed code.
A reasonable structure for both the frontend and backend, with appropriate use of frameworks and libraries.
Your understanding of the code and your ability to explain your choices.
You don’t need to deploy the result—just share a link to a public Git repository. We’ll review your code and discuss any questions during a follow-up call.

Good luck 💪
Dev Team

As a frontend minded pearson I decided to start with UX.

Part 1: Frontend

Drawn UX always helps me to figure out main features/components and define user flows. But I want create solution fast… At this point I decided to use Tailwind + Shadnc/ui + Vercel v0 as a Figma Brainstorm on steroids. I set up a basic repo and read description again. OMG, I forgot to look at https://app.nntb.cz =).

I didn’t want to reinvent the wheel, so screenshot => paste to v0 => Voila, basic html code ready! Then a little bit of rewriting, dividing into proper components and router setup and I got:

  1. Static main page with a little potion of animations
  2. Static Report page with 2 buttons and Table
  3. Router and Secured Paths for router

I still missed UX for Create/Update of report. I decided to use Popup instead of extra page. I like popups, they give me more flexibility in terms of technical solution and make the design lighter, imho)

At that point, I already knew I would reuse same fields twice(Create/Update). So I created:

  • BasicReportPopup with form(react-hook-form) and event handlers like submit, delete and close without changes.
  • UpdateReport
  • CreateReport(which I deleted later as it was too simple and small amount of logic)

That was it for the first stage. To sum up:

  • I like the way I handled popups with popup-manager;
  • I like encapsulated router navigation;
  • I don’t like AuthentificationState. It looks honestly miserable, I would need to implement sessionStorage, to let user stay on report page reload; as well as proper backend authorization.

Part 2: Backend

Node.js, Express… No comments here, that’s the tools I never felt like they can’t fulfill my needs.

DB: I usually use Mongo, but this time I clearly needed something more SQL =).

I choosed pgSql:

  • Typeorm looked like tool I can use without much learning(as I had experience with Java and Spring ORM).
  • Render(Cloud Solution I use) allow fast and free creation.

After some time recollecting what are top 10 OWASP I’d better not to forget to cover in my API, I configured my server. Struggled a little bit with TypeOrm, reflect-metadata import wasn’t an obvious step…At least at 12pm for me =)))) Also my createdAt wasn’t working correctly, but I managed to synchronize database with ORM.

Fortunately, entities was quite simple as well as CRUD controller.

Next worth-mentioning is multer. Here I want to remind to myself and people who read it, that I’m doing testing task, so spending time on configuring Cloud Storage, I would probably like to do that, but not at this step.

To sum up:

  • Simple and clean CRUD.
  • Basic level of security covered(except Authentication which I already described in previous Part, but still I was allowed to skip by the task).
  • Room for improvement in terms of pagination for getAllReports
  • Room for improvement in terms of routes validation
  • Room for improvement in terms of multer configuration or switching to Cloud Solution which is more “production” approach for sure.

Part 3: Connection

I described mostly everything, so let me just highlight the main points:

  • Maybe API utility can be considered as overhead, but I like the way this approach divide Request and Network Errors / Data Computing and Preparation / Usage.
  • I like the good validation level and level of typing
  • I’d think a little bit more how to simplify and connect API with GET_FILE_API.
  • Lack of testing…

PS: Eslint

I’m currently testing and playing around with Eslint. That’s why some strange solutions (e.g. return null in Promise) are in code. My idea is to create the most efficient and comfortable linter config for myself, because I think it’s very underestimated tool in our new world of stupid GPT code.

Last few words

After spending some amount of time, I’d say I like the work I’ve done here. I wish I can spend more time and implement everything, but after all it’s always about triangle of project management

Thank you for reading and Merry Christmas =)))