One, foreword

1.1 Source of Inspiration

In the early years, I was lucky enough to see a web-based Windows XP desktop entertainment system made by foreign leaders. At that time, I just had the idea of building a personal blog. Therefore, I thought whether I could realize a personal blog based on the Mac UI and display the various functions of blog in the form of application.

1.2 Related Links

  1. Front-end open source code: github.com/qianyin925/…
  2. Back-end open source: github.com/qianyin925/…
  3. Component libraries (separate component libraries from the project development process): github.com/qianyin925/…
  4. Online preview (visitors have limited access to all apps): www.qianyin925.com/

Second, why write this project

  1. Apply what you have learned to a specific project, and keep all dependencies and framework versions of the project as up-to-date as possible, so as to keep abreast of the latest knowledge
  2. In my opinion, continuous thinking and brainstorming are the only way to better promote growth. I can expand my capabilities through in-depth thinking on products, architecture, UI, interaction, project deployment and requirements management in projects
  3. Experience back-end (Node) development to understand the overall operation process of each functional module
  4. Putting some of my ideas into concrete projects can bring me a sense of achievement and keep me enthusiastic about technology

…

Three technology stack

3.1 the front

  1. useReact HooksCode as a functional component and use the new versionAntdTo develop
  2. Use a personal component libraryqyrcCarry out project development and package some components in the project toqyrcAnd publish it
  3. useReduxTo manage state and useredux-sagaSolving asynchronous problems
  4. useSassPreprocessor to write styles
  5. useWebpackBuild the project from scratch, complete the basic project configuration
  6. useEslintSpecification of code syntax and style
  7. usehusky + commitlintspecificationgit commitSubmit information

3.2 the back-end

  1. useGraphql + KoaBuild the back-end system
  2. useMongo + mongooseTo store back-end data
  3. usenode-rsaFor the user login passwordrsaencryption
  4. usejsonwebtokenAuthenticating the user (JWT)
  5. usetinifyCompress the uploaded image
  6. usecronTo manage scheduled tasks of the system (at present, daily scheduled backup of system data has been realized)
  7. usenodemailerEmail sending function (mainly used for data backup and sending backup data to specified email addresses)
  8. usepm2To deploy back-end master projects and scheduled tasks
  9. useboxen + inquirer + ora + shelljs + chalkTo make it interactivenpmOptional scripts include data backup, data recovery, role authorization, key creation, and temporary creationToken…
  10. usewinstonRecord logs, including generating log files, printing and matching terminal logswebsocketVisualize logs on the front end
  11. usedocker + docker-composeDeploy projects as containers

Iv. System screenshots

4.1 the editor

For managing personal articles, the left directory is equivalent to the completed functions of file tag: add, delete, change and check articles and tags, publish articles, set thumbnails, preview…

4.2 Diary (The data below is simulated data)

Used to record daily living, weight, body fat, diet, exercise, bills completed functions: data increase, deletion, change and check, historical income and expenditure statistics, daily bill statistics chart, physical signs (signs, body fat) statistics chart……

4.3 Mac Touchbar extension (The following figure is simulated data)

Display your daily weight and your monthly expenses on the Mac Touchbar

4.4 Image Management

It is used to manage system image resources, including article illustrations, thumbnails, default profile pictures, and desktop wallpaper. Completed functions: batch upload, delete and compress pictures (back-end implementation)

4.5 System Preference Settings

Used to set the preferences of the system to achieve functions: program dock automatically hide Settings, menu bar full screen icon display, menu bar whether to show the week, customize the menu bar date format

4.6 Data Dictionary Management

Used to manage system data field data has been implemented functions: data add, delete, change, check……

4.7 System Notification Bar

Imitated Mac notification bar, displaying user information (including logout function), weather forecast…… Realized functions: User information display (including logout function)

4.8 Log Monitoring

Used to view the log information output by the background service in real time (Websocket implementation) Realized functions: obtain and display logs

Five, the ToDo List

  • Reader: used for displaying, querying and reading blog articles
  • Permissions management: Setting permissions with roles (currently via scripts)
  • Script management: online script specified to add, delete, change and check, can be set to run regularly, can be sent by the chat window to achieve the specified
  • Music announcer: Play music (try to access netease Cloud)
  • Comment message module: Add message function in the notification bar, add comment function in the article, add comment message reply function in the background, enable bullet screen (message) function on the desktop
  • Graphic functions: online editing flow charts, mind maps…
  • System configuration: desktop wallpaper Settings, dynamic wallpaper implementation (canvas,webGL)…
  • System monitoring: log monitoring, system resource monitoring, front and back buried points……

…

This article is participating in the “Nuggets 2021 Spring Recruitment Campaign”, click to see the details of the campaign