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.
No followers yet
Once you ship this you can't edit the description of the project, but you'll be able to add more devlogs and re-ship it as you add new features!
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.
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).
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.
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.
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.
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
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.
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
App
component and set up a DashboardContext
to manage user and bookmarks state.index.html
with a new title and favicon.main.tsx
.js-cookie
and Vercel analytics.You can see the full changes here:
last commit on GitHub
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.
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.
I have created approximately 5 commits in this devlog for the repository. This is an explanation for what I have done:
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
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
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
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
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.
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