SaifMARKs

SaifMARKs Used AI

12 devlogs
89h 15m
•  Ship certified

This is a full-stack bookmark application featuring user authorization with short URLs and a backend built with NestJS and PostgreSQL for the database. Backend protected from bots and with rate limiting using Arcjet. In addition, it uses React.js for the frontend. That is all built with TypeScript.
And thanks to Nest server, the backend service is hosted.
All the functionality of the project was tested. However, if you face any issues or discover any problems or bugs, please fill out the contact form to reach me.

Plans:
- In the future, I will provide browser extensions to make bookmarking easier
- I may provide bots on different platforms for taking bookmarks from any place without problems
- If you have any suggestions, please contact me on Slack or fill out the contact form (all love)

AI helped in:
- Making some styling, email templates, writing the readme file, and code completion.

Timeline

Ship 1

0 payouts of shell 0 shells

Saif Abdelrazek

20 days ago

Saif Abdelrazek Covers 12 devlogs and 89h 15m

I have finalized the project and not it in production grade at marks.saifdev.org.
During this devlog, I implemented the contact form functionality and solved some problems and bugs. In addition, I improved the relations between the connected bookmarks and short URLs in updating and deleting them, and so on.
Additionally, added License and readme file
Now, the project is ready for submission.

Update attachment

During this devlog, I have created the short URL functionality and integrated it with the bookmarks service. You could shorten your bookmarks. In addition, I have created the settings section of the website (currently not a lot of settings, hide welcome, theme, and preferred short domain).

Update attachment

During this devlog (it should be approximately 10 hours or so). I have completed the auth functionality (completed delete user, verification, change password, and reset it). I added a verification page that makes the user verify their email if he is not verified and forces redirection to verify. I also completed the bookmarks functionality, and now things are near completion.

Update attachment

I have created the initial profile page and most of its functions.
I have made:
- Enhanced Bookmark component to handle delete confirmation and improved UI.
- Added Profile page with user data editing and password change functionality.
- Implemented user data editing and password change services.
- Updated routes to include a Profile link in the Sidebar.
- Refactored DashboardContext to manage user data editing and password change.
- Adjusted BookmarkTypes and AuthTypes to reflect changes in data structures.
- Improved form handling and error management in user profile and password change forms.

Update attachment

I was working in a place without an internet connection for that devlog, and I have created the frontend functionality that deals with bookmark adding, editing, and deleting bookmarks. I have worked on improving the sidebar handling to not only focus on the dashboard
I have almost finished that part, still there are some bugs that I will work on in the next devlogs.

Update attachment

No updates for the frontend this time. I have implemented and added email verification functionality.

In addition, I have:
- Added email verification feature with token generation and expiration handling.
- Introduced new Email module with Nest-modules Mailer service for sending verification emails.
- Updated User and Email models to include verification fields.
- Implemented endpoints for sending and verifying email addresses in AuthController.
- Created email template for verification emails using EJS.
- Enhanced UserService to manage email addition and user deletion.

I am still not using EJS for the templates, and now it's just HTML
You could view this commit for all details

Update attachment

I have worked on managing users and solved the problem of parsing cookies in the backend, and set them as HTTP-only cookies. In addition, I have worked in the frontend and created Navbar and Sidebar components in DashboardLayout. Handled the theme toggling using Tailwind. Added Auth and Protected Routes that handle access to pages. Set a loader that loads while the user data is still being fetched. Set the shape of the website pages. Set global error handling. The project is now running in SaifMarks with a global error for now since the server is not running. However, you could view the home page, signin and signup pages for now.

Update attachment

I have worked mainly on the frontend handling and authorization. In addition, I have created the home page, signup page, and signin page with their core functionality and user management

That's what I have done briefly

Main Frontend Changes

  • Implemented Main App Structure:
    • Created the main App component and set up a DashboardContext to manage user and bookmarks state.
  • Page Creation & UI Improvements:
    • Redesigned the Home page to integrate with user context. Enhanced the 404 page to include a navigation link for improved user experience (UX).
  • Authentication Pages:
    • Developed Signin and Signup forms with form validation and loading states.
    • Created new types for authentication and user data to improve type safety.
    • Added services for authentication and user data fetching.
  • Project Setup:
    • Updated index.html with a new title and favicon.
    • Set up Vercel analytics in main.tsx.
    • Added dependencies: js-cookie and Vercel analytics.
  • TypeScript Improvements:
    • Added types for authentication and bookmarks.

Backend Changes

  • Refactored the authentication service to use new DTOs and return structured responses.
  • Updated import paths for Prisma client and user model.
  • Enabled CORS and allowed server port configuration via environment variables.

You can see the full changes here:
last commit on GitHub

Update attachment

That time I have made some changes in the backend and initilzed the frontend that What I have done:

Frontend:
Initialized the project using React, React Router, Vite, and Tailwind CSS. Set up TypeScript configurations and established basic routing. Implemented core pages including Home, Dashboard, Signin, Signup, Developer, Profile, and a 404 Not Found page. Established a Dashboard context to manage user state and integrated user management types to support frontend features.

Backend:
Enhanced bookmark management by introducing userBookmarkId and isAdmin fields for improved user and admin distinction. Expanded bookmark functionality with new DTOs and improved error handling mechanisms to ensure robust API responses.

Update attachment

I have just implemented some changes this time

Saifmarks (bookmark management app):

Enhanced user and bookmark functionality by improving Data Transfer Objects (DTOs), adding new user service methods, and expanding end-to-end (e2e) test coverage. In addition, set the bookmarks with 2 IDs, one identifies it globally and one for the user to use. Explanation: If you are a user and I am a user, your bookmark 1 is different than my bookmark 1. In addition, your bookmark has a UUID different from my bookmark's UUID. I have set that in the Prisma schema only for now.
Commit: https://github.com/saifabdelrazek011/saifmarks/commit/6d33fc47171400777221ddae538c1491b8ef290b

If you find any issues, please mail dev@saifabdelrazek.com.

Update attachment

I have created approximately 5 commits in this devlog for the repository. This is an explanation for what I have done:

  1. feat: enhance authentication and user management with improved error handling and new user fields
    I improved the authentication and user management system by adding better error handling and introducing new fields for user data. This likely makes the user experience smoother and more robust against edge cases.
    https://github.com/saifabdelrazek011/saifmarks/commit/379effa30d9c053ce2bd12008971a49e4986eacd

  2. feat: implement bookmark management with controller, service, and DTO
    I added full bookmark management functionality. This included creating a controller, service, and data transfer object (DTO) for handling bookmarks. Now, users can likely add, edit, or delete their bookmarks through a proper API layer.
    https://github.com/saifabdelrazek011/saifmarks/commit/54660ebb16ac1c28d5c91bfb963c7b4e5d9f8d79

  3. feat: improve signup and signin methods with input validation and error handling
    I upgraded the signup and signin endpoints by adding input validation (to ensure only correct data is accepted) and better error handling for authentication failures.
    https://github.com/saifabdelrazek011/saifmarks/commit/a589d95e755852014a487d5403dd9ae3d5c81107

  4. feat: enhance project configuration with dotenv support and add test database setup
    I enhanced the project’s configurability by integrating dotenv for environment variables, and also added setup for a test database, likely improving reliability and making local/testing environments easier to manage.
    https://github.com/saifabdelrazek011/saifmarks/commit/b60774a7a52bc1d5f0c87fcc2d29f2f382dec78f

  5. feat: add user controller and decorator for retrieving user details
    I introduced a new user controller and a decorator to simplify retrieving user details, making it easier to handle user-related requests within the application.
    https://github.com/saifabdelrazek011/saifmarks/commit/98619977b59566fed8cbcad7df2c57558662ca46

If you want more details on any specific commit or want to see further back, check out the full commit history on GitHub:
https://github.com/saifabdelrazek011/saifmarks/commits

The attached image shows the output of the testing process function using the Pactum framework.

Update attachment

I have initialize backend with NestJS, Prisma, and PostgreSQL setup
- Added package.json for backend dependencies and scripts.
- Created initial Prisma migration for User and Bookmark tables.
- Set up relations in a second migration for User and Bookmark tables.
- Added migration lock file for Prisma.
- Defined Prisma schema with User and Bookmark models.
- Implemented main application module and imported necessary modules.
- Created Auth module with controller and service for user signup and signin.
- Added DTO for authentication with validation.
- Implemented Prisma service for database interactions.
- Created basic structure for Bookmark and User modules.
- Set up main entry point for the application with global validation pipes.
- Added end-to-end tests for the application.
- Configured Jest for end-to-end testing.
- Defined TypeScript configuration for building the backend.
-Build the signup, signin and signingTokens functions

And That is all for now

Update attachment