amiv Website

This is the home of the amiv website.

🚀 Quick start

1. Development

   Navigate into the project directory, install all dependencies and run the development server using the following commands:

   yarn install
   yarn run dev

   You can visit the website now at http://localhost:3000

2. Development with Devcontainer (VSCode)

   You can run the prepared development environment with docker and VSCode without the need to install anything project-specific on your system.

   Requirements:

   • (Windows only) Windows Subsystem for Linux (WSL)
   • Docker Engine
   • Visual Studio Code(VSCode)
   • Remote Development Extension Pack for VSCode

   Open the project directory with the prepared devcontainer by clicking the green button in the left button corner of the VSCode window and select Remote-Containers: Open Folder in Container....

   On startup, yarn install is run automatically. You can start the gatsby development process with yarn run dev.

   You can visit the website now at http://localhost:3000

   IMPORTANT: You also have to run the backend project on your machine! It is not possible to use an externally hosted backend.

3. Linting & Formatting

   We use eslint and prettier for linting and formatting of the javascript code. You can use the following commands:

   yarn run eslint
   yarn run format

4. Production Build

   You can prepare a production build manually.

   yarn run build

   For more information about deployment, read the section about deployment below.

🧐 What's inside?

A quick look at the most important files and directories of the project.

.
├── next.config.js
├── middleware.js
├── config.js
├── content/
├── public/
├── locales/
├── pages/
└── lib
    ├── components
    ├── content
    ├── context
    ├── hooks
    ├── images
    ├── intl
    ├── pages
    ├── store
    ├── utils
    └── theme.js

1. next.config.js: This file is where Next.js is looking for its configuration. See next.config.js Reference.

2. middleware.js: This file allows to run code before a request is completed. See Middleware Reference.

3. config.js: This file is where the configuration of the website project is located.

4. /content: This directory contains Markdown and image files used within the project. The files are either referenced directly or loaded while building the project dynamically.

5. /public: All files within this directory are directly copied to the build output directory.

6. /locales: Translation files used by react-intl.

7. /pages: Every js file represents a page which path is exactly like the folder structure and filename.

   Note: Every file starting with an underscore (_) in the pages directory is ignored. Those pages are mostly being used for client-only routes. Therefore no page route is created and no server-side rendering performed.

   Example: The file /src/pages/amiv/about.js will serve the component defined in that file as a page at the path /amiv/about.

8. /lib: This directory contains all source code.

   1. /lib/components: Contains all components used somewhere on the website.
   2. /lib/context: Custom React Context
   3. /lib/hooks: Custom React hooks.
   4. /lib/icons: Custom icon components.
   5. /lib/store: This directory contains all files related to data handling using react-redux.
   6. /lib/utils: Collection of utility functions.
   7. /lib/theme.js: Theme definition for light/dark mode (dimensions, colors, etc.)

💫 Deployment

TODO: Add information about the deployment process of the project.

⚙️ Technologies

Frontend Frameworks & Libraries

• Next.JS
• React
• react-intl
• React-Redux
• MUI

Backend

• AMIV API

Build Tools

• yarn

Development Tools

• ESlint

• Prettier

  Most IDEs have plugins for those tools. VS Code is the recommended IDE.