Week 1 - Project Management

Header Published on: January 27, 2025 Updated on: March 22, 2026

The first week is about Principles and Practices and Project Management. This included setting up a version-controlled documentation website to showcase my progress throughout the course. I used Git for version control and built the website with React, leveraging its component-based structure and dynamic routing for a responsive and scalable design. Tailwind CSS was used to style the website, ensuring a modern and responsive layout.

Setting Up the Website with React

Create a new React app:

npx create-react-app fabacademy-2025

Navigate to the project folder:

cd fabacademy-2025

Install React Router for navigation:

npm install react-router-dom

Install Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Start the development server:

npm start

React Components Used

The website consists of the following components:

Navbar: Provides navigation to all major sections of the site.
Home: The landing page with an introduction to the Fab Academy 2025 project.
About: Includes "About Me" and "Student Agreement" sections.
Assignments: Displays all assignments in a responsive grid layout.
FinalProject: Reserved for documenting the final project.

- Home: "/home"
- About: "/about"
- Assignments Overview: "/assignments"
- Individual Assignments: "/assignments/:id"
- Final Project: "/final-project"

Technologies Used

React: Used for creating a dynamic, component-based website.
React Router: Enables seamless navigation between pages.
Tailwind CSS: Simplifies styling with utility-first classes.
Git: For version control and collaboration.

Setting up SSH Keys and Cloning the GitLab Repository

To securely access and manage your GitLab repository, an SSH key must be created and configured. I followed these steps to set up my SSH key and clone the repository:

Generate an SSH Key:

Open a terminal, such as Command Prompt or PowerShell, and generate a new SSH key by running the following command:

    ssh-keygen -t ed25519 -C "your@mail.com"

This will create a private and a public key. By default, the files are saved in the `~/.ssh/` directory.

Add the Public Key to GitLab:
- Copy the contents of the public key file (e.g., id_ed25519.pub).
- Log in to your GitLab profile and click on your profile picture in the top-right corner.
- Navigate to Edit Profile → SSH Keys, paste the public key into the field, and confirm the action.
Create a Configuration File:

To streamline connections to GitLab, create a configuration file named config (without a file extension) in the ~/.ssh/ directory. Add the following lines to the file:

    Host gitlab.fabcloud.org
        HostName gitlab.fabcloud.org
        User yourusername
        IdentityFile ~/.ssh/id_ed25519
        IdentitiesOnly yes

Test the SSH Connection:

Test the connection to the GitLab server by running the following command:

    ssh -T git@gitlab.fabcloud.org

If the connection is successful, you will see a message like:

    Welcome to GitLab, @yourUsername!

Clone the Repository:

After setting up the SSH key, you can clone your repository with the following command:

    git clone git@gitlab.fabcloud.org:academany/fabacademy/2025/labs/bottrop/students/yourUserName.git

Version Control with Git

Below are the steps I followed to set up and manage my project with Git:

Initialize a new Git repository:

    git init

Add all files to the staging area:

    git add .

Make the first commit:

    git commit -m "Initial commit - set up React project"

Push the code to a GitHub repository:

    git remote add origin https://github.com/<your-username>/fabacademy-2025.git
    git push -u origin main

Building My React App

This documentation describes how I developed my web app using React and React Router, and how I deployed it to GitLab Pages by copying the build output to the public folder.

1. Setting Up the React Project

I initialized a new React app using create-react-app and configured React Router for navigation.

VSCode Setup

The navigation was created using react-router-dom to allow seamless routing between pages.

React App Structure

App.js

const App = () => {
return (
<div>
<Navbar />
<Routes>
  <Route path="/" element={<Navigate to="/home" />} />
  <Route path="/home" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/final-project" element={<FinalProject />} />
  <Route path="/assignments" element={<Assignments />} />
  <Route path="/assignments/1" element={<Assignment1 />} />
  ...
  <Route path="/assignments/19" element={<Assignment19 />} />
</Routes>
</div>
);
};

export default App;

Navbar.js

const Navbar = () => {
const [isOpen, setIsOpen] = useState(false);

return (
<nav className="bg-teal-500 text-white shadow-md">
  <div className="container mx-auto px-6 py-4 flex justify-between items-center">
    <h1 className="text-2xl font-bold text-white">
      <Link to="/home">Fab Academy 2025</Link>
    </h1>
    <div className="hidden sm:flex space-x-4">
      <Link to="/home">Home</Link>
      <Link to="/assignments">Assignments</Link>
      <Link to="/final-project">Final Project</Link>
      <Link to="/about">About Me</Link>
    </div>
  </div>
</nav>
);
};

Here you can see the structure of my Assignments Page, that navigates through the different weeks of the Fabacademy.

Assignments.js

const Assignments = () => {
  return (
    <div className="container mx-auto my-8">
      <h2 className="text-3xl font-bold mb-6 text-center">Assignments</h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        {assignments.map((assignment) => (
          <div key={assignment.id} className="block bg-white shadow-lg rounded-lg overflow-hidden hover:shadow-xl transition-shadow">
            <div className="bg-teal-500 text-white text-center py-2">
              <p className="font-bold">{assignment.week}</p>
            </div>
            <Link to={assignment.id === 20 ? "/final-project" : "/assignments/" + assignment.id}>
              <img src={assignment.image} alt={assignment.title} />
              <div className="p-4 text-center">
                <h3 className="text-lg font-bold">{assignment.title}</h3>
              </div>
            </Link>
          </div>
        ))}
      </div>
    </div>
  );
};

Here you can see the hamburger menu for mobile devices.

Navigation Mobile

3. Deploying to GitLab Pages

To make the app accessible online, I built the project and copied the contents (!) of the build folder into public in my GitLab repository. It took some time for me to realise, that I don't have to copy the entire folder into the public folder. So if your page is not running properly on the server, that might be an issue.

GitLab Deployment

This configuration ensured my React app was built and served from GitLab Pages correctly.

Outcome

I successfully set up a documentation website this week! I am looking forward to continue developing and bringing life to it!

Update 2026:

Website Migration: From React to MkDocs

Unfortunately, I was no longer able to host my old React-based documentation site via GitLab. Due to this limitation, I decided to migrate my entire Fab Academy documentation to MkDocs – a lightweight static site generator that is perfectly suited for project documentation and widely recommended for fabacademy documentation.

Setting Up MkDocs

Follow these steps to set up MkDocs on a new machine:

1. Install Python

Download and install Python from the official website: https://www.python.org/downloads/macos/

2. Create a Virtual Environment

python3 -m venv .venv

3. Activate the Virtual Environment

source .venv/bin/activate

4. Install MkDocs and Dependencies

On an existing project with a requirements.txt:

pip install -r requirements.txt

On a fresh setup:

pip install mkdocs-material

5. Create a New MkDocs Project (only needed for a brand new site)

mkdocs new .

This creates: - mkdocs.yml – the central configuration file for your site - docs/ – the directory containing your content, starting with index.md

6. Preview Your Site Locally

mkdocs serve

Then open the link shown in the terminal – in my case: http://127.0.0.1:8000/2025/labs/bottrop/students/annasophia-brokuf/

The structure of the site is defined entirely inside mkdocs.yml. Each page corresponds to a Markdown file inside the docs/ directory. The nav section controls the order and hierarchy of pages in the navigation menu:

nav:
  - Home: index.md
  - About: about.md
  - Progress: progress.md
  - Assignments:
    - Overview: assignments/index.md
    - Week 1 - Principles and Practices: assignments/1.md
    - Week 1 - Project Management & Web: assignments/2.md
    - Week 2 - Computer-Aided Design: assignments/3.md
    - Week 3 - Computer-Controlled Cutting: assignments/4.md
    - Week 4 - Embedded Programming: assignments/5.md
    - Week 5 - 3D Scanning and Printing: assignments/6.md
    - Week 6 - Electronics Design: assignments/7.md
    - Week 7 - Computer-Controlled Machining: assignments/8.md
    - Week 8 - Electronics Production: assignments/9.md
    - Week 9 - Input Devices: assignments/10.md
    - Week 10 - Output Devices: assignments/11.md
    - Week 11 - Networking and Communication: assignments/12.md
    - Week 12 - Mechanical Design (2025): assignments/13.md
    - Week 12 - Mechanical Design (2026): assignments/13-2026.md
    - Week 13 - Molding and Casting: assignments/14.md
    - Week 14 - Interface Programming: assignments/15.md
    - Week 15 - System Integration: assignments/16.md
    - Week 16 - Wildcard Week: assignments/17.md
    - Week 17 - Application and Implications: assignments/18.md
    - Week 18 - Intellectual Property: assignments/19.md
    - Week 19 - Final Project Requirements: assignments/20.md
  - Final Project: final-project.md
  ```

---

### Design – Material for MkDocs

For the visual design I used the **Material for MkDocs** theme, which offers a clean, responsive layout and many customization options. The theme is also configured in `mkdocs.yml`.


```yaml

theme:
  name: material
  palette:
    primary: teal
    accent: teal
  language: en

Custom colors could also be defined via additional CSS. Therefore an extra_css entry in mkdocs.yml pointing to a stylesheet in your docs/ folder has to be created. I decided for a minimalistic approach at the moment, but might be adding a custom design in the future.