Omnimor - Keep-up

I recently finished The Complete Web Development Bootcamp

Now, it's time to roll up my sleeves and practice. With that in mind, I set myself a challenge: to complete a project every two weeks. And why not share my experience! 😃

So, I started looking for some project ideas. At the same time, Omnivore was saying its goodbyes. So, why not rebuild Omnivore?

Okay. The goal of the project was mainly to see where I stood after the bootcamp.

The question: How far can I go in two weeks?

Set objective

Rebuild Omnivore and integrate as many features as possible in two weeks.

At that point, I thought:

"Okay Lila, how do you organize yourself?"

First thing first: what features matter the most to me in this project?

Render article: improve readability and remove distractions
Read Later: centralize and organize articles I want to keep or read later
Metadata: optimize my reading time and organization
AI: optimize my content consumption

I used Perplexity to guide me in project management. And yeah, that was a first for me. I had the idea to separate the setup, back, front, and data parts, but honestly, it was a bit blurry. And I don't like blurry things.

So, with Perplexity, I created a plan with milestones. Things were already much clearer.

Coming from the medical field, if there's one thing I do master, it's to-do lists.

If you're not familiar with patient care projects, it's basically a big to-do list per patient that you update throughout the day based on the information you receive about them.

So, I feel much more comfortable and efficient when my tasks are well defined.

Development

I progressed relatively smoothly through the setup and back-end. The main challenge was finding a scraper.

I dug around and found Readability/jsDom:

Readability analyzes the DOM generated by JSDOM to extract only the article from the given URL.
Reading the documentation, I saw that there was a security issue related to displaying HTML code from an external (and potentially malicious) source.
Hence the use of DOMPurify, which cleans the code before displaying it.

My API was ready. GO for the front!

And then... disaster struck! 🤣

What happened?

I wasn't clear on the design.

I wanted to replicate Omnivore, but in my own way, improvising as I went… Mistake!

Why was this a mistake?

A little context: I love creative arts. Drawing, pottery, painting...

Except that my creative process is the complete opposite of my work process:

"full improv!"

And that's the problem.

I tackled my DOM like a blank canvas.

As a result, I started getting lost.

When I realized it, I took a break and went on Figma to create a wireframe and put everything in order.

Finally, after some reflection, I decided to replicate Omnivore's exact design, given the ETA.

What I learned from this

For my next project, I'll organize the front exactly like I did for the back.

That means spending time on the objectives and setting up a detailed execution plan.

In the end

In two weeks, I implemented a full-stack web application (React + Node.js) that allows saving and reading articles from any URL.

The frontend (React/Vite) provides an interface to manage articles, while the backend (Express/PostgreSQL) extracts relevant content from web pages using Readability.

If you want to check it out, it's here.

Key features

Article extraction
Database storage
CRUD operations
Responsive interface

What I learned from this project

Two weeks is short 😅
Improve project management (Creative process for the front? NO.)
Lots of new concepts to explore:
- CSS variables in React
- Docker/Docker Compose
- React Query
- IndexedDB
- Security 🤩