Warning [WIP] This project is done for educational purposes related to algorithms. The parts related to the layout are written 'quickly' just to display the algorithms. Additionally, it is in progress, so the code is not yet of the highest quality.

---

Table of contents

1. Introduction
2. Tech stack
3. Motivation
4. Features
5. Project structure
6. Setting up
7. Running the project
8. Deploying the project
9. Conventions

---

Introduction

Introducing Algorockstar, an innovative app that makes understanding and working with data structures and algorithms a breeze. Our app has three key features to help users of all levels, from beginners to experts, to gain a deeper understanding and mastery of these complex concepts.

---

Tech stack

We chose to use Next.js for our project because of its excellent SEO capabilities, Server-Side Rendering (SSR) capabilities, and Static Site Generation (SSG) capabilities. These features allow us to optimize our website for search engines, improve the load time and performance of our website, and generate a static version of our website for faster delivery.

We chose to use TypeScript for our project. Its strong typing and safety features make our code more reliable and maintainable, and its educational value helps developers understand the underlying concepts of software development.

Lastly, for styling, we chose built in styled-jsx as it is popular and stable solution. We considered other libraries like JSS or styled-components but due to styled-jsx's resemblance to modern web components and in our view bright future, we decided to stayed with it, especially that it comes out of the box.

The project also includes plans for a mobile app, which will be developed using React Native. While we considered using React Native for Web, we ultimately decided against it because of the current limitations in sharing code between React Native for Web and React Native, as well as the need for SEO. In 2023, the process of sharing code between the two is not as smooth as we would like, and it was important for us to prioritize SEO in the development of our mobile app.

---

Motivation

At AlgoRockstar, we believe in the importance of understanding algorithms and data structures in software engineering. That's why we're creating an app that makes learning these concepts fun and easy. Our app features three key components: an interactive summary that guides users through essential resources such as videos and articles, a visualization tool that brings data structures to life, and ready-to-use code examples in multiple programming languages. Join us on this journey to master the building blocks of software development.

---

Features

The first feature is a comprehensive description of data structures and algorithms, complete with useful resources such as explanations, articles, and videos. This feature is perfect for users who are new to the subject and need a solid foundation of knowledge to build upon.

The second feature is a dynamic visualization feature that allows users to interact with data structures and algorithms in a visual and intuitive way. This feature is perfect for users who learn best through visualization and interaction, as it provides an interactive and engaging way to understand the underlying concepts.

The third feature is a collection of ready-to-use code examples in various programming languages. This feature is ideal for users who are looking to implement the data structures and algorithms they have learned into their own projects. With this feature, users can easily copy and paste code examples into their own projects, saving them time and effort.

---

Project structure

We decided to choose the so-called ducked folders and files structure. More about the concept you can find here. We want everything that relates to a component to exist within its own folder. This way of organising files is very scalable and intuitive.

Folders structure [To be updated]

1. SRC
   1. Assets - images, graphics and other external media
   2. Components - react components
      1. ExampleComponent - component directiories, holding component and relating tests, stories, styles
   3. Styles - global styling variables, utils etc.
   4. Utils - additional helper functions and variables
   5. Pages - default next.js folder corresponding to next's routes

Optinal back-end: The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages. API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

Component files [To be discussed and updated]

Each component folder at the ExampleComponent level should consist of the following component's files:

1. ExampleComponent.tsx - implementation
2. ExampleComponent.stories.mdx - stories
3. ExampleComponent.test.ts - test
4. ExampleComponentStyles.ts [optional] - styles

Please follow the system design guidelines. If everyone makes every effort to comply with common rules, our code will be in order, that is easy to maintain, repair and develop.

---

Setting up

NPM packages

Install all necessary dependencies by running yarn in your terminal (in project's root directory).

---

Running project locally

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result. You may use ctrl / cmd + right click, clicking the link in the development console - should open the application in preferable browser automatically.

---

Deploying the project

Our Next.js app probably will be deployed on Vercel Platform.

Conventions

Setting files

1. For now we keep settings / configuration files close to the place where they are being used. For example if we have an array keeping the shape of the navigation:

const nagivation = [
  {
    title: 'Home'
    url: '/'
  }
]

and the directory holding component responsible for rendering this navigation - we keep settings in the same directory, like this: /Navigation -- settings.ts -- NavigationComponent.tsx

Git

We use semantic naming of branches following suffixes example: feature - for features fix - for bug fixes refactor - for refactoring chore - changes to build processes or auxiliary tools as here