During this devlog, I have worked on making the website content more polished and in better shape. I have improved the navbar, added a system theme, and reduced the content of the footer. In addition, I integrated Sanity CMS and used it to provide the projects in the projects page and the most viewed section. Additionally, I completed the search page styling and structure, and functionality. The only remaining step is to use the query of the page in fetching the projects from Sanity for it to be completed.

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.

During this devlog, I have created the search functionality for the books and integrated the AstroDB for saving and removing the saved books for the user. I have added dark and light modes.

It's done now and ready to be tested

I have finalized the website for now, solved the problem of the PWA not working, and updated its config with a custom manifest file. Updated the readme file and added MIT license. In addition, I added vercel.json to handle caches
This is a video moving through the whole website

I have solved the problem of search overlay by swapping, and I have added favicons and icons to the website. I have added integration for Vite-PWA and changed the titles and description for the website.

Improved the blog styles and added pagination, added author pages, solved the problem of themes and search overlay after swapping, and enhanced the styles of the search overlay. Added RSS feed for the blog posts using astro/rss. Added system theme option to the themes. A lot of problems occur because of the client routing and swapping, and that's painful. Currently, there are some problems with the search overlay in the blog. I will work on them during the next development session. However, most of the website functionality is good now, and you could test it from Here.

During this devlog, I created the projects section and the education section that show the current education records in the portfolio. In addition, I have created education pages that display my complete education records throughout my life. In addition, I have created a projects section with a link to the repo page. I have created the hero section and improved the about section. Now, the project is running on my domain
You could view the full details at this commit

In this devlog, I have worked on improving the blog by adding a search to the blog. In addition, I have started working on the portfolio, I have completed the about section and technologies section. I want to make things different than any portfolio and at the same time benefit from astro ssg abilities. So, after created my technologies section as any normal portfolio. I have changed the way of displaying technologies to display only the favourite technologies, not all technologies, and made another page at /tech to view the full list of my skills and technologies with a simple description and a link to more info on an external website. I am working on making my website provide the full content from markdown files to enable editing from decap cms at production without changing the source code, and thanks to Astro for that.

During this devlog, I have resolved the issues with content loading, and I have enhanced the blog post UI to be better. In addition, I have added the Netlify adaptor to the astro config to enable the deploying with the SSR (server side rendering) functions and API routes. I have added functions for client-side tracking and send the information of the sender to the entered email to avoid any suspious and bad users behaiver using the contact form. I have added a default reply message that will be sent to the user after using the contact form with the data provided in the form and the user's IP address, city, and country. I have implemented themes for the reply message, dark and light, that will be sent to the user according to his chosen theme on the website.

In this time, I have created complete light/dark mode support for all the completed pages, and I have improved the contact form functionality by loading and disabling the state for 2 seconds to avoid sending a lot of emails by mistake. I made the mailer send the form content to the sender's email.

I have completed the logic of sending emails from the contact form.

At this time, I have created a live config for my Hackatime stats and added it to the top of the repository's page, along with a block for them. This made the stats page useless for now, so I have removed it. In addition, I have created a new page called the 'now' page, which is a page where you write about what you are doing in the present time. If you want to understand more about the now pages, you could view THIS for more info. At the end, I have created a contact me page (frontend only for now), and I am handling the logic for submission and so on now. I will work on that in the coming devlog. Things could seem easy to do, but using live config is so confusing.

I am happy to have reached this moment after hours of trying to use Astro live.config from Astro 5.10 (astro now at 5.11 btw). The feature is known, so using it was not that easy since it is a new feature and their no way to use it except from the docs, and I failed a lot of type errors since the feature expects a specific way of setting data and types not as anyone want. However the process of learning was so funny. I am happy now to complete the repos page using this beautiful feature.

After I created the last devlog, and thought that I had finished everything and went to make the testing video. I found a problem in updating and deleting short URLs. However, I was sure that I had tested that before, and all is working fine. After hours and hours trying to find what happened and living in the console. I was finally able to find the problem. The problem is that the database doesn't return the createdBy field in the shorturls, so reading that field to check whether the user is the owner of the shorturl by comparing their ID with the createdBy ID in the shorturls database always returns an error. How then, I was able to update and delete, I was using a super admin user in testing that made me able to edit and delete. That was a shock for me since that meant that the main website of the service wasn't working either, and I won't never recognize this problem. But thanks god, everything is working now.

No thing, just made this because this 21m will make me suffer while working on my other projects

I am now working on improving the blog and not just like before by adding pagination, searching, and things like that. But first, I am currently working on improving the style of the blog. In addition, I am currently trying to find I way where I could use the astro/image integration since this Image component provides image optimization to your image by turning them to webp or avif, and that provides faster moving. However, the problem is that when the photos are in the src directory, you should import the img src as a component and put it in the src of the astro/image component, so I am trying to find a way to make that dynamically according to each post but their are some problems that I face some problem in that. In addition, while I am reading the astro blog for the latest updates, during Astro 5.0 and higher. I found something called live.config, which is a built-in feature in Astro that lets you load and fetch the content dynamically, and I think it is better than using client-side data fetching in my stats page.

What I have created to:
I created the blog posts layout, the head, and the cards for them. Updated the posts collections to use the latest Astro content API with glob, set a 404 page, and improved the styling of the bio page and more, but this is what I remember to write for now.

I have finished the project with all of its functions and commands
That's what I have done briefly:

• Add /todo command: Complete setup guide for new users with step-by-step API key instructions
• Add /justtest command: Temporary test API key for SoM/Converge participants

• Automatic bot command setup: Deletes old commands and sets current command list

• Update command descriptions and help text

• Enhanced main menu with setup hints for users without API keys

• Updated welcome message to prominently feature /todo command

• Add setupBotCommands() function for automatic command management

• Integrate command setup into bot initialization process

• Clean up unused imports and fix linting issues

• Remove duplicate command setting logic

• Update systemd-compatible environment variable format

• /todo - Setup guide for new users

• /justtest - Get test API key (SoM/Converge only)

and more, and the project is now ready for production.

I have solved the bugs in setting the API key functions, added a check API key existence function, and a shorturls existing function in the core api to make the process of validation better. I also created the shorturls functions, getting, creating, and deleting, and I will work on completing them in the coming hours.
- Added shorturl.services.js to handle user interactions for creating, viewing, updating, and deleting short URLs.

What I have done, too:
- Integrated API utility functions for short URL operations in shorturl.js.
- Created api.utils.js for Axios instance configuration.
- Developed apikey.js to check API key existence.
- Enhanced crypto.utils.js for better encryption key validation.
- Added domain preference management for users.

In this devlog, I have completed the functionality of the API key management. Now, the users could set, update, delete, and view their API keys. I also implemented a contact command. I also created the bot page and the contact form page on the main website, mainly to manage the contact if there is any problems are found by the users in the bot, and it could be used by the main site users. I also make the /start command create a user in the database, and /apikey show an inline keyboard where each button creates a callback to handle functions. The set and update API keys function only updates the API key of the user without affecting the other information.

This time, I have understood a lot of concepts, and things have become clear. Now I have created a MongoDB database with a mongoose schema. Created the crypto functions to encrypt and decrypt. I have also understood a core concept in bot development, which is the difference between polling and webhooks. The polling is a way where the bot asks the service or platform if there is any message it should answer. This process is repeated every period of time and doesn't require a running server, only a running script. The webhook is another technique where the platform, in my case Telegram, sends the message to the bot whenever the users send it. However, that needs a running public server with an address for Telegram to send the messages to. The webhook technique is better for enterprises but harder to set up. At the end, I have set the /apikey command with set and update functions within an inline keyboard that sends a callback for running the functions, currently completing the other functions.

First time creating a Telegram bot. Most of the time is spent on choosing the best library or framework for building the website. I have tried setting up a project with NestJS, but found that things will be more complicated than I need. Since I aim to make it as simple as possible and depend on the API keys from my main service, SaifURLs, and that will avoid me from creating a complete authentication for users, just let them set the API key, and they can work as they want. My service, SaifURLs, already provides API keys for users if needed after they sign up, and then they can get the key from the developer page. Okay, after trying NestJS, I have tried ExpressJS with Telegram main API but wanted more easier tool. Until I found a library called node-telegram-bot-api, it was the simplest way to create the bot, and I am using it now.

I was working on updating the blog, so I have created the navbar and the footer of the blog section. In addition, I have created the stats page with some stats like my coding time for today and the overall total, and the latest 2 repos I have created on GitHub. I used the hackatime API and github API for that. In addition, I have created a simple biolink tree page.

• Refactored blog header and footer components for better structure.
• Introduced a new NavBar component for consistent navigation across the site.
• Updated BlogLayout to include NavBar and BlogFooter.
• Enhanced Post component to support new image structure with alt text.
• Added new Link component for reusable link styling.
• Created a new 404 page with a user-friendly message.
• Implemented a biolink page showcasing social links and contact information.
• Added stats page to display coding statistics and latest GitHub repositories.
• Introduced a secret page with one-time token functionality.
• Updated global styles for improved design consistency.
• Added new SVG icons for better visual representation.
• Included avatar image for personal branding.

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.

During this devlog, I worked mainly on completing the home page and did some other work. What I have done:
feat: completed the home page with a simple and modern UI and added a section for the most viewed projects.
feat: implement SearchForm component for project search functionality
feat: create SearchFormReset component to reset search input
Refactor: update the SignUp component to use action state for form handling and error display
fix: adjust import path for getUserFromDb in auth utility
feat: add signup utility for user registration with validation
Chore: update next.config.ts to allow additional Cloudinary domains
Chore: update package.json and package-lock.json to include new dependencies
fix: update tsconfig.json to correct path mapping for utils
feat: define project types for better type safety in project components

You can view this commit for complete details

Solved the problem of confirming the password and made the email field read-only, and added a license

I didn't make any updated in the frontend and was working on the auth functionality:

• Implement secure password hashing using bcryptjs
• Create user registration and authentication database operations
• Add proper Prisma schema with NextAuth.js adapter models
• Update all auth imports to use centralized lib/auth.ts
• Fix critical issues: parameter order in verifyPassword, JWT encoding error handling
• Include database migrations for user model and NextAuth.js tables
• Using secure password hashing library (bcryptjs)

You could view the commits at this repo

🚀 TechLogs Development Update - 2nd devlog

I've implemented a complete authentication system with NextAuth.js v5 Beta supporting GitHub OAuth, Google OAuth, and email/password authentication, plus Prisma ORM with PostgreSQL for the database. The entire foundation is built with Next.js 15, React 19, and TypeScript, with comprehensive input validation using Zod schemas and clean route group organization for maintainability.

The UI/UX development has been amazing! I'm using Tailwind CSS v4 with a complete dark/light theme system, smooth Framer Motion animations, and custom text effects like BlurText and CircularText components. Everything is fully responsive with clean, professional authentication forms. I've organized the work into 14 strategic commits covering database utilities, validation schemas, UI components, animation systems, and the entire app architecture.

Right now, users can sign up, sign in through multiple providers, and access protected routes with a beautiful, theme-aware interface. Currently working on integrating Cloudinary for image management and finishing the blog CRUD operations with a rich text editor. Next week's goal is a complete MVP where users can create accounts, write posts, and read content from others. The learning experience in modern React patterns, security best practices, and scalable architecture has been incredible! 🎉

Thanks to GitHub Copilot for writing that for me and helping with code styling

Progress on GitHub

I have initialized the Next.js project, added AuthJS, and created Google and GitHub OAuth components. I have also added a layout, a navbar, and configured Tailwind CSS with the primary colors of the project. Also added some blocks from reactbits.dev and used them in creating the loading page. Also added the logos and favicons of the project.

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

Updated the readme and the loader with the service name and themes support

I have added a secret page. I have added functions to get my HackaTime stats and the latest GitHub repos. In addition, I added a 500 error page, don't know why, but it won't harm. I added Prettier, robots.txt, StarRepo button. Furthermore, I have refactored layouts to MainLayout/BlogLayout. The secret page is no longer secure, but working on that. You could look at this commit for the full information.

Created Router tracking and saved it on the local storage to make the 404 pages navigate you to the last place you were in, and another link for returning to the home. In addition, I have implemented an authRoutes and protectedRoutes that handle the places where the user will go, and added a loader to make the thing more user-friendly. I have added some fields in the signup users with user name and confirm password, and things like that. I have added a pagination for the short URLs in the dashboard too.

You could view the last two commits at the repo for complete details.

I have initialized the astro project. This is the first time to used this framework, so I took some time to understand what's going on. I have created the blog part of the website. I think I won't edit its logic in the future, maybe only the styling. In addition, adding decap cms for admin managing to the blog (editing, creating, and deleting) and using Netlify Identity for it was really like hell. However, it is now working very well.

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

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

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 worked on the api and the frontend, and that's what I have done.

saifapi (backend):

Enhanced the short URL service by adding a new endpoint to fetch short URLs by ID, improved CORS configuration for localhost, introduced an optional user info validation schema, refactored API key middleware for safer access, and removed unused validation schemas. That solved the problem of updating the user information from the profile of user
Commit: https://github.com/saifabdelrazek011/saifapi/commit/a38a5295bb6f26cddede2f19a20c710382d6733d
Refactored user-related middleware and controllers to streamline user authentication and API key handling, improved CORS configuration for short URL access (now allowing short URLs from any origin), and updated email notification templates for login alerts.
Commit: https://github.com/saifabdelrazek011/saifapi/commit/423df4fbac8427821a533edaf0f19720de4b1b47

saifurl (frontend):

Enhanced authentication forms with a password visibility toggle and navigation links, and updated signup form styling.
Commit: https://github.com/saifabdelrazek011/saifurl/commit/069b67f102c8b72cc377960b1f2bce11d628334b
Added Developer page for API key management and enhanced Dashboard with pagination for short URLs. In addition, the page provides all the requests that you could make with the API key. That will make anyone able to create their short URL frontend website or save it in any place they want to view it without caring about the backend management.
Commit: https://github.com/saifabdelrazek011/saifurl/commit/a06fee8875f42b22a61c1d9538270de08ba071e4

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

During this development period, integrate Google Analytics by adding the tracking script to the main HTML file. Updated service status visibility with displays and links across multiple pages. Introduced a Profile page, providing options for email verification, changing password, and updating account information. Strengthened account security and flow by preventing unverified users from viewing or creating short URLs. Enhanced loading indicators, error handling, and navigation logic across authentication flows for a smoother user experience.

For any issues, please don't hesitate to contact dev@saifabdelrazek.com.

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.

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

In these 4 hours. I have improved the redirection between pages and added status information for the short URLs server on the home and dashboard pages. Additionally, status for the authentication API is displayed on the signing and signup pages. I have created the copy for the URLs function with the short domain that you select at the bottom of the dashboard. I have enhanced the signing in and signing, as well as other API requests, with a loading state to improve the user experience and prevent excessive requests by preventing requests while in a loading state. If you found any issues, mail dev@saifabdelrazek.com.