Published
A few months ago, I started coding up a project I’ve always wanted to create. Introducing QuikNote, a note web app.
🌎 https://quiknote.vercel.app/
QuikNote features user authentication, a rich text editor, and a user-friendly interface.
The story behind the project
Originally created in React using JavaScript, I switched to Typescript (because this is my first project using Typescript). Though it was challenging at first, migrating from JS to TS, I later found the process to be a good learning opportunity.
The app is powered by Firebase.
Challenges
The foremost challenge I faced in this project was creating a note and only displaying it to the owner, not everyone else who uses the app.
I must admit, I did spend a lot of time trying to fix this. I read the docs, tried Stack Overflow and other forums, but I couldn’t solve the issue.
Finally, I had a eureka moment, and discovered the solution was looking me in the face all this time 😂. But that’s why I love taking my time on projects, no matter how small they are. If I try new things, errors are bound to happen, but with a methodical approach, I’ll find the solution and learn from the experience!
Another challenge was using Typescript. I had watched a Typescript video prior, but using it in real-time seemed to be very different. Fortunately, I have the internet, and I utilized tools like blogs, forums, docs, and videos to get a sense of what I needed to do.
I also utilised a good ol’ AI friend to explain certain Typescript concepts I was unfamiliar with.
Future Plans
I thoroughly enjoyed every second making this — from the frustration of things not working as they should, to the joyous moments seeing the progress being made.
From now on, I’ll try my best to use Typescript in most of my projects.
Also, I plan on using more UI styling libraries/frameworks.
On a final note, I saw firsthand what a lack of planning in a project does to everyone involved. So I’ll continuously push myself to create user interfaces for each project before writing a line of code.
I can’t count how many times I had to pause because I didn’t have a set user interface beforehand.
Also, I do enjoy creating user interfaces, so why not combine two things I love?
Thanks a lot for reading to this point, I really appreciate you. Be on the lookout for my next project (it’s a secret, so I can’t tell you exactly what it is. HINT: It might have something to do with Pikachu 🤫).
TOOLS USED IN THIS PROJECT
⚛️ React.js
📃 Typescript
💅 Styled-components
📁 React Icons
🔥 Firebase
undraw.co for illustrations
P.S: If you have some feedback or suggestions, please use this form
You might also like these

Local image not displaying in public folder: EASY fix -NextJS

My thoughts after creating a notes web app

How to easily style active link in NextJS

VS Code Cursor Problem: Why It’s Deleting Instead of Inserting Text

How to install Tailwind v4 in a Vite project

Use your custom 404 component on Vercel — Easy Fix

Space vs. Gap — Tailwind CSS Explained

How to create a reusable Button component in ReactJS with TailwindCSS