Skip to content

OlgaSwan/olga-blog

Repository files navigation

Logo Personal site Feature-Sliced Design

💥 Introduction

Being a frontend developer, I realized the importance of having my own digital footprint. So, I decided to create my own website. This site serves a dual purpose - it's a platform where I can display my work, and also a space for me to express my thoughts through blog posts.

🚀 Features

  • Block-style editor: allows to create articles composed of different types of content blocks. These blocks can include titles, paragraphs, Markdown-formatted text, iframes for embedding content, code snippets, and images. This feature gives flexibility in structuring articles by combining these various block types to create engaging and diverse content.
  • Tag filtering: Using tags, users can explore content based on particular topics, themes, or categories. Each diary is associated with one or more tags that reflect its subject matter.
  • Cloud Firestore Integration: Firebase's seamless integration simplifies data storage and synchronization, ensuring real-time updates across devices and platforms.
  • grommet framework: provides a set of UI components designed for accessibility, modularity, and responsiveness. Its theming capabilities ensure a consistent and visually appealing user interface across the application.
  • Animations: tilting diary card animation creates an interaction with the content previews. Parallax animation bring a dynamic, multi-layered effect to content as users scroll.

📜 Packages

  • React - the library for web and native user interfaces
  • Typescript - typesafety, enhances code quality, catches errors during development, and improves overall maintainability.
  • Cloud Firestore/Firebase - flexible, scalable NoSQL cloud database, built on Google Cloud infrastructure, to store and sync data.
  • Nanostores - a tiny (298 bytes) state manager with many atomic tree-shakable stores.
  • grommet - a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package.
  • Feature-Sliced Design - architectural methodology for frontend projects.
  • GSAP - fancy high-performance animations that work in every major browser.
  • React Hook Form - performant, flexible and extensible forms with easy-to-use validation.
  • Loadable Components - a React code splitting library.
  • Sass - powerful professional grade CSS extension language.
  • React Router V6 - lightweight routing library.
  • React Helmet - a document head manager.
  • Yarn - an open-source package manager used to manage dependencies in JavaScript projects.
  • Vite - a build tool that aims to provide a faster and leaner development experience for modern web projects.
  • Vitest - a Vite-native testing framework.
  • Node.js - a cross-platform, open-source JavaScript runtime environment.
  • Prettier - a code formatter.

🛠️ Local development

To ensure that you are able to install everything properly, I would recommend you to have Yarn, React and Vite installed. Once everything is set up, run the commands:

  • yarn to install dependencies,
  • yarn develop to start local dev server,
  • yarn test to run tests,
  • yarn format to format and lint,

Also, you could check other scripts in package.json.

If you have any development ideas, feel free to create a pull request or message me.