On April 9, I registered the domain ahd.im and planned to build a short link system based on it. However, after searching various platforms like GitHub, I couldn't find a satisfactory project. Most of the UIs were ugly or the algorithms were inefficient, making it hard to meet my vision. Therefore, I decided to write my own short link system.
Selection#
This is my first time independently completing a full-stack system, and the exploration process will naturally accumulate experience for my full-stack development skills. Thus, choosing an efficient, highly compatible, and universal tech stack is an extremely important step.
Backend#
For the backend, the most important thing is to ensure code quality and execution efficiency.
PHP is too inefficient, and the code is messy, which I do not appreciate.
ExpressJS is not suitable for writing larger system applications; its concurrency is also weak, and the mix of synchronous and asynchronous code can be confusing.
Although Golang has strong performance, it does not align with my coding habits.
C++ probably doesn't have a usable web development framework.
In the end, I chose to use the Java Spring Boot framework to write backend functionality, using MyBatis + MySQL for data control.
Frontend#
There weren't as many choices for the frontend.
I'm not very familiar with jQuery, and in today's era of advanced frontend frameworks, I have no reason to choose a framework that is about to be phased out.
I don't like Vue, so I didn't learn it.
I learned AngularJS, but still didn't like it.
I really like React.
Thus, the choice of frontend framework was easily completed.
UI#
For the user side, after reading many public articles, I found that Alibaba's Ant Design seemed quite good, so I chose Ant Design.
For the admin side, since I really lacked imagination and didn't know how to design with Ant Design, and I didn't have time to study (actually, I just didn't feel like researching), I reverted to Material UI.
Tech Stack#
From the above, I confirmed the tech stack needed for my development:
- Frontend
- React
- TypeScript
- Ant Design
- Material UI
- Backend
- Spring Boot
- MyBatis
- Data
- MySQL
Development#
Due to various reasons, I delayed the start of development until early May. Learning the functions and features of Ant Design, Java syntax, and Spring Boot usage also took a considerable amount of time.
About a week later, I officially began the Development Progress of AHdark/Link.
Backend
Backend
Backend
Backend
Frontend
Frontend
Frontend
With the separation of frontend and backend and simultaneous development, it naturally required many configurations on local and testing servers.
The IntelliJ Idea I used efficiently adapted to Java and React development, allowing me to develop both frontend and backend in a professional editor.
The efficient Idea editor also minimized errors in my code, reducing the number of recompilations.
Don't underestimate the memory usage of Idea; just writing a few lines of code can exceed 4GB, which is really not normal.
The frontend is embedded in the backend project directory through Git Submodule. Although it requires a Sync Commit every night to modify the frontend Git version saved in the backend to ensure consistency between frontend and backend, it still ensures project consistency and development stability.
Modularization#
Modular development allows my development process to be more regularized, avoiding major code changes due to modifications in a particular function.
Top-level Routing
At the top level of the frontend, I distinguished between the user side and the admin side using React Router v5.
Admin Side#
Admin Side Routing
At the top level of the admin side, I placed the Layout rendering part outside of the Switch to avoid repeated rendering when switching pages.
I also processed each page into JSX.Element and placed them in different directories.
Thus, every time I develop a page or component, I can just modify the files in a specific directory, avoiding confusion in the Git Commit Log.
User Side#
User Side Routing
On the user side, I used Router to distinguish pages and separate each page.
Backend Program#
The backend code is developed strictly according to specifications, with layers for Controller, Service, etc., to ensure the stability of the program.
@topjohncian for Major Optimization of Frontend Code#
First of all, I would like to thank @topjohncian for his optimization suggestions and analysis of my frontend code.
Previously, I used react-router-dom@v6 for routing separation, checking whether the user was logged in via requests to the backend on each page.
This implementation was neither elegant nor efficient, and it would degrade the user experience.
With his help, he tried to create <AuthRoute> <NoAuthRoute> and other middleware for me.
Due to the foolish characteristics of react-router-dom@v6, after a long trial, we decided to downgrade to v5 for higher extensibility.
AuthRoute Element
Deployment#
After a long development process, I began to focus on deployment.
One important aspect was Debugging. Although I tried my best to find and fix bugs, there were still many bugs waiting to be fixed when deploying to the production environment.
After a few hours, the program iterated to a new version, and I fixed the vast majority of unresolved bugs.
The production environment and the testing environment are not on the same cloud service provider to avoid privilege escalation in the testing environment affecting the production environment.
You can visit https://ahd.im to preview the actual effect.
The short link generation is currently only open to registered users, and registration is not available, so you may not experience the process of short link generation and site management.
User Side - Home Page
User Side - Settings
Admin Side - Dashboard
Admin Side - User Management
About the Project#
The Link short link system is a closed-source project developed with React + Spring Boot for frontend and backend separation.
Its GitHub private repositories are located at https://github.com/AH-dark/Link and https://github.com/AH-dark/Link-Frontend, but you cannot access them to obtain the source code.
The main developer is @AHdark.
The successful implementation of the project could not have been achieved without the assistance of @topjohncian.
Thank you for reading, and we will continue to update this project and decide whether to open source it based on the situation.
This project was fully open-sourced on May 28, 2022.