From de22cafb120a2a4efe517bd17cc92c4c96fa6532 Mon Sep 17 00:00:00 2001 From: Hazem Krimi Date: Sun, 11 Jun 2023 18:10:53 +0100 Subject: [PATCH] Add astrobuild project --- _projects/astrobuild.mdx | 66 +++++++++++++++++++ .../react-weather-app.mdx | 0 components/GlobalStyles.tsx | 48 +++++++------- utils/projects.ts | 6 +- 4 files changed, 91 insertions(+), 29 deletions(-) create mode 100644 _projects/astrobuild.mdx rename {_portfolio => _projects}/react-weather-app.mdx (100%) diff --git a/_projects/astrobuild.mdx b/_projects/astrobuild.mdx new file mode 100644 index 0000000..a2911b2 --- /dev/null +++ b/_projects/astrobuild.mdx @@ -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 +![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) \ No newline at end of file diff --git a/_portfolio/react-weather-app.mdx b/_projects/react-weather-app.mdx similarity index 100% rename from _portfolio/react-weather-app.mdx rename to _projects/react-weather-app.mdx diff --git a/components/GlobalStyles.tsx b/components/GlobalStyles.tsx index 7225b32..dc0cb4d 100644 --- a/components/GlobalStyles.tsx +++ b/components/GlobalStyles.tsx @@ -5,31 +5,31 @@ const GlobalStyles = createGlobalStyle` margin: 0; padding: 0; box-sizing: border-box; - font-family: 'Source Code Pro', monospace; - font-size: 16px; - line-height: 1.5; - outline: none; - user-select: text; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - - @media(max-width: 768px) { - overflow-x: scroll; - } + font-family: 'Source Code Pro', monospace; + font-size: 16px; + line-height: 1.5; + outline: none; + user-select: text; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + + @media(max-width: 768px) { + overflow-x: scroll; + } - &::-webkit-scrollbar { - width: 0; - height: 0; - background: transparent; - } + &::-webkit-scrollbar { + width: 0; + height: 0; + background: transparent; + } - &::-webkit-scrollbar-thumb { - background: transparent; - } + &::-webkit-scrollbar-thumb { + background: transparent; + } - &::selection { - background: var(--text); - color: var(--background); - } + &::selection { + background: var(--text); + color: var(--background); + } } html { @@ -67,10 +67,6 @@ const GlobalStyles = createGlobalStyle` body::-webkit-scrollbar-thumb { background-color: var(--text) !important; } - - a { - text-decoration: none; - } `; export default GlobalStyles; diff --git a/utils/projects.ts b/utils/projects.ts index 1e5129b..e4a6123 100644 --- a/utils/projects.ts +++ b/utils/projects.ts @@ -2,7 +2,7 @@ import fs from 'fs'; import path from 'path'; import matter from 'gray-matter'; -const projects = path.join(process.cwd(), '_portfolio'); +const projects = path.join(process.cwd(), '_projects'); export const getProjects = () => { try { @@ -10,7 +10,7 @@ export const getProjects = () => { if (!fileNames) return []; - const allPortfolioProjectsData = fileNames.map(filename => { + const allProjectsData = fileNames.map(filename => { const slug = filename.replace('.mdx', ''); 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)) { return 1; } else {