---
title: 'Astrobuild'
description: 'Prototype of a collaboration tool between stakeholders for building software projects'
date: '2023-06-11'
demo: 'https://astrobuild.vercel.app'
code: 'https://github.com/hazemKrimi/astrobuild'
tags: ['react', 'typescript', 'graphql', 'styled-components', 'apollographql', 'vite', 'react-flow']
---

# Introduction

This was my final year of studies projects where my collegue and I worked on a prototype for a project building solution for the agency we had an internship in called [Astrolab](https://astrolab-agency.com).
As there were lockdowns in Tunisia in 2020/2021 because of covid software agencies and clients could not have in person meetings to discuss a client's software project.
So the idea of Astrobuild is to reduce meetings and make the client participate with other stakeholders in the process of creating a software project by tracking and communicating with their associated product owner.

# Features

### Client
  - Account management
  - Project creation from choosing the templates, features and deliverables (Specification, design, MVP or full build)
  - Project tracking
  - Chat with associated product owner for tracking and support
  - Payment (WIP)

### Product Owner
  - Account management
  - Management of templates
  - Review of projects and transferring deliverables
  - Chat with clients on their projects

### Developer
  - Account management
  - Features, categories and wireframes management

### Admin
  - Identity and access management (WIP)

# Technologies Used
The frontend project is a [React](https://react.dev) application with [TypeScript](https://www.typescriptlang.org) which consumes a set of [GraphQL](https://graphql.org) APIs using [Apollo GraphQL](https://www.apollographql.com) and a some REST APIs.

A small components library with a custom theme was made for this project using [Styled Components](https://styled-components.com) which can be viewed at the components folder.

The prototyping feature was done using [React Flow](https://reactflow.dev) which is a library for creating and interacting with diagrams.

To view the full architecture of the application go [here](https://github.com/MedAmineFouzai/astrobuild-api/blob/main/README.md).

# Screenshots

### Project page for the client
![Project](https://github.com/hazemKrimi/astrobuild/blob/main/screenshots/project.png?raw=true)

### Template page for the product owner
![Template](https://github.com/hazemKrimi/astrobuild/blob/main/screenshots/template.png?raw=true)

### Prototype page for the developer
![Prototype](https://github.com/hazemKrimi/astrobuild/blob/main/screenshots/prototype.png?raw=true)

### Support page for the product owner
![Support](https://github.com/hazemKrimi/astrobuild/blob/main/screenshots/support.png?raw=true)

### User editing page for the admin
![Admin](https://github.com/hazemKrimi/astrobuild/blob/main/screenshots/admin.png?raw=true)

# Credits

- Mohamed Amine Fouzai: [GitHub](https://github.com/MedAmineFouzai), [LinkedIn](https://www.linkedin.com/in/amine-fouzai)