SaifURLs Used AI
This is a short URL service that I have built using ReactJS and React Router for the frontend and ExpressJS for the backend. The App contains login pages and a Dashboard that show the user short URLs and allows the user to create, edit, and delete short URLs. In addition, it includes a profile for the user to manage their account. Furthermore, it includes a developer page to let anyone access their short URLs using their API key and edit them. Github Copilot helped in this project with the styling and in the Readme writing. BTW, this is my first real full-stack project and first time to use React that way, and I am happy about that.
The repo URL shows the frontend and the backend at [SaifAPI](https://github.com/saifabdelrazek011/saifapi) (they don't support markdown, I think) (&-&)
You could test the website with summer.test@urls.saifdev.xyz (verified email) and summer.test3@urls.saifdev.xyz (unverified email), and summer.test5@urls.saifdev.xyz (according to my laziness) or create your own. Try all with the password Test@summer3. And the three accounts will be deleted anyway at the end (=-=)
Ship Your Project
Get ready!
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!
Timeline
No thing, just made this because this 21m will make me suffer while working on my other projects
Solved the problem of confirming the password and made the email field read-only, and added a license
Updated the readme and the loader with the service name and themes support
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 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.
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.
