bem-te-vi challenge: project sketch

[AlexandreHiroyuki]

Goals

• Use the ULTIMATE bem-te-vi stack (Hono, NodeJS, TypeScript, PostgreSQL, Remix).

• Good UX.

• Document everything important. It's not only about the code but the reasoning behind every decision in the code.

• Finish in one week.

• Open Source Experience.

• Communication/Teaching.

• Learn how to use Remix.

• Learn how to use Hono.

• Learn how to use Panda CSS.

• Learn how to use React Aria.

• Learn how to use Zod.

• Learn how to use Swagger.

Thematic Choice

An application closer to the insurance context would be preferable, but I lack knowledge about innovation in this market. My second choice is a context with which I'm more familiar because I can show more about my reasoning about problems and how I could act after learning more context when joining the company.

My last job and current college projects were about IoT systems (embedded and web development), therefore where I can speak the most with less time.

Prerequisites

• Has a list.
• Use authentication.
• Create pages for:
  • Creating a new record (form-based interaction).
  • Reading existing records (display records in a list or table).
  • Updating existing records (editable form).
  • Deleting existing records (confirmation prompt before deletion).
• Data Fetching with Remix Loaders.
• Responsive front-end design.

Conclusion

Because the presentation is coming up soon, it's better to treat this project as a Proof of Concept.

I will document everything in English since the codebase will be open source.

• Home page.
• Sign In / Sign Up.
• Dashboard with a list of devices.
• A specific device page that plots its data.

Extra ideas

• Use an LLM to provide a periodic report of a group of devices.

[AlexandreHiroyuki]

Dependencies Required by the Challenge

Front-end

• Remix
• React
• TypeScript
• Panda CSS
• React Aria

Back-End

• Porsager Postgres
• TypeScript
• NodeJS
• Hono
• Zod
• Swagger

Database

• Postgres

Extra

• Scalar

[AlexandreHiroyuki]

Database

In every project I work on, I prefer to keep every dependency possible isolated in its project to avoid conflicts with different development environments and other codebases on the same machine.

With that in mind, I installed PostgreSQL through Docker instead of directly on my computer.

[AlexandreHiroyuki]

About workspaces

The front-end and back-end share some dependencies, which makes me think about using workspaces to manage and standardize versions across these codes and share schemas.

However, for a one-week project, I considered a bit of over-engineering because I could not risk losing time to environment setup issues.

[AlexandreHiroyuki]

Features and TODO

Reference: #3

[AlexandreHiroyuki]

Front-end Design

Figma is a great tool for collaboration between designers and developers or as a prototype tool for consistent long-term development.

Even so, I chose to use a simpler tool (aka pen and paper) due to the short time available for development and the fact that my team has only one person working on this project.

"Fail fast".

If the project had more collaborators or time available, I would certainly use Figma.

Design System

Choosing Colors

I want the design to communicate technology, control over your business machinery/products, and a touch of professional/exclusive access.

With that in mind, my first color choice is blue.

Blue light inhibits the pineal gland from producing melatonin because sunlight is almost the only source of natural blue light. And melatonin is the hormone that regulates the day cycle in animals' bodies. For humans, high melatonin means it is nighttime and, therefore time to sleep. So blue is a nice color for keeping the user awake and attentive, making them feel more productive. Also, a higher contrast shade with the background can make reading and identifying objects (like buttons) less tiring for the eyes.

Now speaking about the AI feature, I wanted to communicate the tool in a more professional environment given that AI is the big trend. So I chose brown as a secondary color because it is more luxurious and serious. Besides, blue and brown (a shade of orange) are complementary colors, meaning they harmonize well while expressing their opposition of contexts. I used this site to calculate the exact code for the complementary color: https://www.canva.com/colors/color-wheel/

After picking the main colors of my project's brand, I used this tool to generate the shades needed for the design system: https://www.skeleton.dev/docs/generator

Important: Any React component used less than twice in different files should not be abstracted to avoid wasting time with overengineering.

Some style variables used only once were separated using the variable name to keep the tag utility more descriptive and intuitive.

Home Page - Sign In / Sign Up

With the POC mentality, a big landing page to present the product is undesirable. It's better to focus on delivering the product's main features.

Therefore, the website outside the main product has to be only one page, preferably without scrolling to keep it simple and attractive to the eyes on the presentation. This means short texts to avoid distractions, layout, and colors that draw the user's attention and willingness to click the buttons to start using the product.

I want the user to experience the product as soon as possible, so the sign-up form does not have unnecessary fields.

Conclusion: a one-screen page, a grid of 2x2, 1st column of a concise presentation about the product (title and description), 2nd column with sign-in and sign-up form.

Dashboard Page

• Shows a list of devices.
• Add mock device.
• Delete mock device.
• Read mock device data.
• Edit mock device.

Future Updates

Due to a lack of time, some features should be postponed.

• Plot devices' data in graphs.
• Connect a real device.

AI Report Page

It was meant to look like a formal paper document, but with a modern pleasurable look.

Request Handling

I prefer to use Axios instead of writing fetch manually because the syntax becomes leaner, it doesn't require manual serialization and parsing, it has built-in error handling, and it is widely compatible with older browsers.

[AlexandreHiroyuki]

Backend

Database

Relational Schema

Attribute	Data Type	Constraints	Description
id	SERIAL	Primary key, Auto-increment	Unique identifier for each user
email	VARCHAR(255)	Unique, Not null	Email address of the user
password	TEXT	Not Null	Encrypted password of the user
created_at	TIMESTAMP	Default: NOW()	Timestamp when the user was created
updated_at	TIMESTAMP	Default: NOW(), Updated automatically	Timestamp when the user record was last updated

Backend to Database Abstraction Layer

I considered using Drizzle ORM to be closer to the bem-te-vi stack, but it has many features and would take too long to learn how to use it properly. There is a big chance that I would make better code using a weaker library that I already know than trying to brute force a half-assed code with Drizzle.

Besides, I lost too much time searching for database dependencies compatible with the recommendations, and it's better to prioritize delivering the product until the presentation date. After the first delivery, it's possible to refactor with more patience.