Mix Space, a mixed space, is a small personal space station. Inheriting the tradition of blogs, it has rich content different from blogs. It is suitable for writing enthusiasts who like different styles or types of writing.
Actually, it is just an imitation, transplantation, and open source of many personal spaces. Why? Because such systems are generally for personal use and not open to the public. (For example: Paul's nest, radio station, etc.) And I just want to imitate and open source it.
In the past month, the basic functions have been fully improved. The writing part of the backend has also been completed. The next step is to expand the functionality. Next, I will discuss the things to be done and the defects that need to be fixed in three parts.
Frontend
Due to time constraints, the UI of the first version of the frontend was not independently designed. So I still used my master's design. This development has been ported to React based on the existing HTML structure. NextJS is used for server-side rendering because SEO needs to be done.
Q: Why not use Vue?
A: Although Vue is a good framework, I also started with Vue. But currently, Vue has poor performance for server-side rendering (referring to Vue2). NuxtJS encounters various problems in many cases (see Nuxt pit notes for details). The frontend of Mix Space's predecessor, Focus, was developed using NuxtJS + Vue. But this time, the entire architecture was rewritten using TypeScript, so React is the most suitable.
Remaining tasks:
- Functional optimization
- Page improvement
Advantages of frontend-backend separation:
- Flexible frontend development without backend restrictions
Problems encountered in frontend-backend separation:
- SEO is relatively difficult compared to template engines
- Configuration may have a lot of hardcoding and lack flexibility
Possible tasks:
- Porting other themes
- Developing our own theme
Admin Panel
The admin panel is developed using Vue + TypeScript because SEO optimization is not needed for the backend, so Vue is used. The main reason is that the predecessor used Vue + JavaScript for development, and considering the time cost, it was refactored based on this. However, the experience of using TypeScript to write Vue is still poor.
Remaining tasks:
- Functional improvement
- Setting module
Possible tasks:
- Rewrite using Vue3 (based on TypeScript support)
Backend
The backend has been ported from Express and rewritten using Nest.js. The advantage of Nest.js is that it adopts the ng architecture, with weak coupling between modules and clear functional layers, making it easy to maintain in the later stage. The database still uses MongoDB.
The focus of this project is on the backend, so the backend has taken the most time. Due to security and functionality, everything is concentrated in the backend, and writing a good backend is the top priority. Therefore, all requests will be sanitized and validated, which is the most comprehensive measure to prevent NoSQL injection from the source.
Remaining tasks:
- Configuration module
- WebSocket module
- Separation of sub-applications
Conclusion
The purpose of rewriting all three platforms using TypeScript is mainly for future maintainability. So it can be said that a lot of effort has been put into the development stage. After all the features are implemented, unit testing and E2E testing will be introduced.
You can now access the Live Demo from here.