– URL Shortening: Cuttr allows users to shorten URLs by pasting a long URL into the Cuttr platform, and a shorter URL is automatically generated. The shortened URL is designed to be as fast as possible, making sharing on social media or other channels easy.
– Custom URLs: Cuttr also allows users to customize their shortened URLs. Users can choose their custom domain name and customize the URL to reflect their brand or content. This feature is handy for individuals or small businesses who want to create branded links for their
– QR Code Generation: Cuttr also allows users to generate QR codes for the shortened URLs. Users can download and use the QR code image in their promotional materials or/or on their website. This feature will be implemented using a third-party QR code generator API, which can be integrated into the Cuttr platform.
– Analytics: Cuttr provides basic analytics that allows users to track the performance of their shortened URLs. Users can see how many clicks their shortened URL has received and where the clicks are coming from. This feature will be implemented using Firebase’s built-in analytics feature.
Best Practices:
Build and deploy a scalable code base with proper linting and formatting with Prettier and Eslint. Ensure you use typescript with either Vuejs or React with the necessary SEO. You must build with either Firebase, Hasura, or any backend technology that will allow you to store user data and carry out authentication. It is essential to allow Cuttr users to write content with markdown. Form validation is essential. At least 2 unit tests and 3 component tests should be present in the codebase.
- Firebase for user authentication, database and others
- Google fonts
- Nanoid for generating unique ID's
- React + TypeScript
- React Feather for icons
- React Type Animation for typing animation
- React Router for routing
- TailwindCSS for styling
- Vercel for hosting
- Vite as a build tool and local development server
- Vitest + @testing-library/react + @testing-library/jest-dom for testing
During the course of attempting this project, I learnt a lot and I probably won't be able to mention it all here but these are some of them below:
-
Firebase
Because of this project, I was finally able to work with firebase. I learnt how user authentication works, how to get user data like email, photo, email and so on from a user. I also gained some knowledge in working with firestore, using it as my database to store user data. I was able to create, read, update and delete user shortened links, making it my first CRUD app with user authentication.
-
Vitest
Though I'm still geting the hang of it, I was able to add vitest to my app and test some components and functions with it. I will get beter at it though and add better tests to this in due time.
-
React + TypeScript
Of course, the main tools cannot be ignored, I learned a lot about the React library and the typescript language. It's not perfect, but give me some credit. This is the very first app I built with typescript and I believe I did a very good job. Still, there's room for improvement which I am open to and will embrace.
There are a lot more, but like I said, I won't be able to cover them.
If you've read to this point, thank you very much for your time and I appreciate you reading this. If you want to know more about me, maybe learn together, be friends, offer some advice on how I can do better, offer some feedback on this project or any of my work, or you know, offer me a job🙃, or refer me to omeone that'll offer me a job, this is me...below