About the project

I have gained a wealth of essential knowledge and skills related to Front-End development. The goal of this project is to structure this knowledge in an easy-to-use format and share it with other developers or those who want to start their careers.

• Data collection

  Obsidian, MarkdownTo create structured notes, I use the Obsidian app. There could be a long article written about all of Obsidian's features and advantages, but for me as a developer, the key point is that I have full access to and control over my files. These are Markdown files that I can easy edit, convert and reuse in any suitable way. Obsidian is integrated with GitHub, which provides flexible version control and access across my different devices.

• Data transformation

  Node.JSTo prepare data for database use, I created a Node.js utility. As a result, it produces a .csx file that primarily contains Markdown syntax but is also separated, structured, and provided with metadata.

• Data storage

  MongoDB, MongoDBCompassTo store data, I chose MongoDB for its powerful and flexible features and its availability as a free solution. MongoDB is a popular NoSQL database known for its scalability and ease of use, making it ideal for modern applications. For managing and interacting with the database, I use MongoDB Compass, a user-friendly GUI that simplifies data visualization, querying, and performance monitoring.

• Fullstack application

  Next.JSTo build an effective React application with minimal effort, I chose to use version 14.2 of the Next.js framework. It's not only a modern framework for building full-stack applications but also a production-ready framework with many optimization features.

• Back-End

  Next.JS, mongoose, mongodbNext.js provides developers with the opportunity to create REST API endpoints directly within the application. This feature helps minimize code duplication and increase reusability, streamlining development and improving maintainability. For interaction with the database, relevant packages are used.

• Front-End

  React.JS, MUI, Ramda, React markdown, Framer motionAs Next.js is used, there are two kinds of React components: Server and Client. For the UI, I use the MUI library, which offers modern and very useful type-oriented 'sx' syntax. Framer Motion provides custom components with smooth animations. As mentioned earlier, Markdown is used for creating my notes. To simplify the process of converting Markdown into React components, I chose the react-markdown package, which efficiently parses and renders Markdown content directly in React, offering flexible customization opportunities.

This is a fully responsive single-page web application (scaling from 320px to 3080px). It features an interactive UI designed in accordance with best practices and performance optimizations, ensuring a seamless experience across all devices.