mirror of
https://github.com/hazemKrimi/personal-website.git
synced 2026-05-01 18:00:26 +00:00
Add astrobuild project
This commit is contained in:
@@ -0,0 +1,66 @@
|
|||||||
|
---
|
||||||
|
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
|
||||||
|

|
||||||
|
|
||||||
|
### Template page for the product owner
|
||||||
|

|
||||||
|
|
||||||
|
### Prototype page for the developer
|
||||||
|

|
||||||
|
|
||||||
|
### Support page for the product owner
|
||||||
|

|
||||||
|
|
||||||
|
### User editing page for the admin
|
||||||
|

|
||||||
|
|
||||||
|
# Credits
|
||||||
|
|
||||||
|
- Mohamed Amine Fouzai: [GitHub](https://github.com/MedAmineFouzai), [LinkedIn](https://www.linkedin.com/in/amine-fouzai)
|
||||||
@@ -67,10 +67,6 @@ const GlobalStyles = createGlobalStyle`
|
|||||||
body::-webkit-scrollbar-thumb {
|
body::-webkit-scrollbar-thumb {
|
||||||
background-color: var(--text) !important;
|
background-color: var(--text) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export default GlobalStyles;
|
export default GlobalStyles;
|
||||||
|
|||||||
+3
-3
@@ -2,7 +2,7 @@ import fs from 'fs';
|
|||||||
import path from 'path';
|
import path from 'path';
|
||||||
import matter from 'gray-matter';
|
import matter from 'gray-matter';
|
||||||
|
|
||||||
const projects = path.join(process.cwd(), '_portfolio');
|
const projects = path.join(process.cwd(), '_projects');
|
||||||
|
|
||||||
export const getProjects = () => {
|
export const getProjects = () => {
|
||||||
try {
|
try {
|
||||||
@@ -10,7 +10,7 @@ export const getProjects = () => {
|
|||||||
|
|
||||||
if (!fileNames) return [];
|
if (!fileNames) return [];
|
||||||
|
|
||||||
const allPortfolioProjectsData = fileNames.map(filename => {
|
const allProjectsData = fileNames.map(filename => {
|
||||||
const slug = filename.replace('.mdx', '');
|
const slug = filename.replace('.mdx', '');
|
||||||
|
|
||||||
const fullPath = path.join(projects, filename);
|
const fullPath = path.join(projects, filename);
|
||||||
@@ -31,7 +31,7 @@ export const getProjects = () => {
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
return allPortfolioProjectsData.sort((a, b) => {
|
return allProjectsData.sort((a, b) => {
|
||||||
if (new Date(a.date) < new Date(b.date)) {
|
if (new Date(a.date) < new Date(b.date)) {
|
||||||
return 1;
|
return 1;
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
Reference in New Issue
Block a user