Merge pull request #106 from SheCodesAus/DEV

Merge main

README.md

@@ -1,3 +1,55 @@
-# Front End Template
+<h1 align="center" id="title">DiversiTech</h1>
 
-This repo contains a freshly initialised React project. That means you won't need to create a project with Vite. Just clone this repo down and you're ready to start working together on your project's front end. Remember to use good Git technique and co-ordinate with one another!
+<p align="center"><img src="src/assets/About/wholelogo.png" alt="project-image"></p>
+
+<h2 align="center">By A Dynamic Array - A She Codes Plus Project 2023/2024</h2>
+
+<p align="center"><img src="https://img.shields.io/badge/python-3670A0?style=for-the-badge&amp;logo=python&amp;logoColor=ffdd54" alt="shields"><img src="https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&amp;logo=react&amp;logoColor=%2361DAFB" alt="shields"><img src="https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&amp;logo=javascript&amp;logoColor=%23F7DF1E" alt="shields"><img src="https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&amp;logo=html5&amp;logoColor=white" alt="shields"><img src="https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&amp;logo=css3&amp;logoColor=white" alt="shields"><img src="https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&amp;logo=node.js&amp;logoColor=white" alt="shields"><img src="https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&amp;logo=vite&amp;logoColor=white" alt="shields"><img src="https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge&amp;logo=visual-studio-code&amp;logoColor=white" alt="shields"><img src="https://img.shields.io/badge/figma-%23F24E1E.svg?style=for-the-badge&amp;logo=figma&amp;logoColor=white" alt="shields"><img src="https://img.shields.io/badge/Canva-%2300C4CC.svg?style=for-the-badge&amp;logo=Canva&amp;logoColor=white" alt="shields"><img src="https://img.shields.io/badge/netlify-%23000000.svg?style=for-the-badge&amp;logo=netlify&amp;logoColor=#00C7B7" alt="shields"><img src="https://img.shields.io/badge/markdown-%23000000.svg?style=for-the-badge&amp;logo=markdown&amp;logoColor=white" alt="shields"></p>
+
+## About
+
+[Explore DiversiTech](https://main--diversitech.netlify.app/)
+
+A platform where women and individuals who may not fit the stereotypical tech mold can thrive, mentor, connect, and inspire! Whether you're seeking guidance on entering the tech industry or eager to offer support on someone's journey into tech, this is the place to connect, mentor, and make a difference.
+
+## MVP
+
+## Demo
+
+## Features
+
+## Installation Steps
+
+## Typography and Colour
+Typography
+![Typography](src/assets/Wireframes/Group-319.png)
+Colours
+![Colours](src/assets/Wireframes/Colors.png)
+
+## Wireframes
+Home Page
+![Homepage](src/assets/Wireframes/Home-page.png)
+About Page
+![About Page](src/assets/Wireframes/About-us-page.png)
+Profile Page
+![Profile Page](src/assets/Wireframes/Profile-page.png)
+Sign-Up Page
+![Sign up page](src/assets/Wireframes/Sign-up.png)
+Login Page
+![Sign in](src/assets/Wireframes/Sign-in.png)
+## Screenshots
+
+## Future Developments
+
+## Resources
+
+## The Team
+
+| Name             | Role                               | Email                                                                                                                                                                  | Github                                                                                                                                                                                                | LinkedIn                                                                                                                                                                             |
+| ---------------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Anya Belkina | Backend Developer                    | <a href="mailto:[email protected]"><img alt="Link to email contact address" src="https://img.shields.io/badge/email-D14836?style=for-the-badge" target="_blank" />            | <a href="https://github.com/awesomeann"><img alt="badge for GitHub" src="https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white" target="_blank" /></a>     | <a href="https://www.linkedin.com/in/anya-b-a96078106/"> ![LinkedIn](https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white)           |
+| Rachel Blake | Full Stack Developer                    | <a href="mailto:[email protected]"><img alt="Link to email contact address" src="https://img.shields.io/badge/email-D14836?style=for-the-badge" target="_blank" />            | <a href="https://github.com/blakerach1"><img alt="badge for GitHub" src="https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white" target="_blank" /></a>     | <a href="https://www.linkedin.com/in/rachel-maree-blake/"> ![LinkedIn](https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white)           |
+| Karla Gaudet | Frontend Developer, UX/UI                    | <a href="mailto:[email protected]"><img alt="Link to email contact address" src="https://img.shields.io/badge/email-D14836?style=for-the-badge" target="_blank" />            | <a href="https://github.com/ktechgau"><img alt="badge for GitHub" src="https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white" target="_blank" /></a>     | <a href="https://www.linkedin.com/in/karlagaudet/"> ![LinkedIn](https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white)           |
+| Lindi Harding | Full Stack Developer                    | <a href="mailto:[email protected]"><img alt="Link to email contact address" src="https://img.shields.io/badge/email-D14836?style=for-the-badge" target="_blank" />            | <a href="https://github.com/Lyndallh"><img alt="badge for GitHub" src="https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white" target="_blank" /></a>     | <a href="https://www.linkedin.com/in/lindi-harding-5280b445/"> ![LinkedIn](https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white)           |
+| Sahar Kavousi | Frontend Developer, UX/UI                    | <a href="mailto:[email protected]"><img alt="Link to email contact address" src="https://img.shields.io/badge/email-D14836?style=for-the-badge" target="_blank" />            | <a href="https://github.com/Sahar-Kavousi"><img alt="badge for GitHub" src="https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white" target="_blank" /></a>     | <a href="https://www.linkedin.com/in/sahar-kavousi-1730b8227/"> ![LinkedIn](https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white)           |
+| Shay Zimmerle | Git Manager, Frontend Developer                    | <a href="mailto:[email protected]"><img alt="Link to email contact address" src="https://img.shields.io/badge/email-D14836?style=for-the-badge" target="_blank" />            | <a href=mail"https://github.com/shayzimm"><img alt="badge for GitHub" src="https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white" target="_blank" /></a>     | <a href="https://www.linkedin.com/in/shayzimm/"> ![LinkedIn](https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white)           |

src/api/delete-experience.js

@@ -0,0 +1,27 @@
+async function deleteExperience(experienceId) {
+    const url = `${import.meta.env.VITE_API_URL}/experience/${experienceId}`;
+
+    const token =window.localStorage.getItem("token");
+
+    const response = await fetch(url, {method: 'DELETE', headers: {
+        "Content-Type": "application/json",
+        "Authorization":`Token ${token}`,
+      },});
+
+    if(!response.ok){
+
+        const fallbackError = 'Error fetching experience';
+
+        const data = await response.json().catch(() =>{
+
+            throw new Erro(fallbackError);
+        })
+
+        const errorMessage = data?.detail ?? fallbackError;
+        throw new Error(errorMessage);
+    }
+
+     return await response.json();
+}
+
+export default deleteExperience;

src/api/get-experience.js

@@ -0,0 +1,20 @@
+async function getExperience(experienceId) {
+    const url = `${import.meta.env.VITE_API_URL}/experience/${experienceId}`;
+    const response = await fetch(url, {method: 'GET'});
+
+    if(!response.ok){
+
+        const fallbackError = 'Error fetching experience';
+
+        const data = await response.json().catch(() =>{
+
+            throw new Error(fallbackError);
+        })
+
+        const errorMessage = data?.detail ?? fallbackError;
+        throw new Error(errorMessage);
+    }
+     return await response.json();
+}
+
+export default getExperience;

src/api/post-experience.js

@@ -0,0 +1,41 @@
+async function postExperience(
+    experience_type, 
+    description, 
+    experience_url, 
+    picture_url, 
+    is_present_experience,
+    start_date, 
+    end_date,
+    profileId ) {
+
+    const url = `${import.meta.env.VITE_API_URL}/profile/${profileId}/experiences/`;
+    const token =window.localStorage.getItem("token");
+
+     const response = await fetch(url, {
+        method: "POST", // We need to tell the server that we are sending JSON data
+    // so we set the Content-Type header to application/json
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization":`Token ${token}`,
+        },
+
+        body: JSON.stringify({
+            "experience_type": experience_type,
+            "description": description,
+            "url": experience_url,
+            "picture_url": picture_url,
+            "is_present_experience": is_present_experience,
+            "start_date": start_date,
+            "end_date": end_date
+        }), 
+    });
+        if (!response.ok) {
+        const fallbackError = `Error trying to create an experience`;
+        const data = await response.json().catch(() => { throw new Error(fallbackError);
+        });
+        const errorMessage = data?.detail ?? fallbackError;
+        throw new Error(errorMessage); }
+        return await response.json(); 
+    }
+
+    export default postExperience;    

src/api/post-profile.js

@@ -1,8 +1,8 @@
 async function postProfile(
     bio,
-    // city,
-    // country,
-    // state,
+    city,
+    country,
+    state,
     location,
     picture_url,
     is_hidden,
@@ -14,7 +14,9 @@ async function postProfile(
     portfolio_url,
     contact_preference,
     is_open_to_mentor,
-    is_seeking_mentorship) {
+    is_seeking_mentorship,
+    tags,
+    industries,) {
 
     const url = 
     `${import.meta.env.VITE_API_URL}/profiles/`
@@ -28,9 +30,9 @@ async function postProfile(
         },
         body: JSON.stringify({
             "bio": bio,
-            // "city": city,
-            // "state": state,
-            // "country": country,
+            "city": city,
+            "state": state,
+            "country": country,
             "location": location,
             "picture_url": picture_url,
             "is_hidden": is_hidden,
@@ -43,8 +45,8 @@ async function postProfile(
             "contact_preference": contact_preference,
             "is_open_to_mentor": is_open_to_mentor,
             "is_seeking_mentorship": is_seeking_mentorship,
-            "tags": [],// to be implemented
-            "industries": [],// to be implemented
+            "tags": tags,// to be implemented
+            "industries": industries,// to be implemented
         })
     });
     if (!response.ok){

src/api/put-experience.js

@@ -0,0 +1,39 @@
+async function putExperience(
+    experience_type, 
+    description, 
+    experience_url, 
+    picture_url, 
+    is_present_experience,
+    start_date, 
+    end_date, experienceId) {
+    const url = `${import.meta.env.VITE_API_URL}/experience/${experienceId}`;
+    const token =window.localStorage.getItem("token");
+
+     const response = await fetch(url, {
+        method: "PUT", // We need to tell the server that we are sending JSON data
+    // so we set the Content-Type header to application/json
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization":`Token ${token}`,
+        },
+
+        body: JSON.stringify({
+            "experience_type": experience_type,
+            "description": description,
+            "url": experience_url,
+            "picture_url": picture_url,
+            "is_present_experience": is_present_experience,
+            "start_date": start_date,
+            "end_date": end_date
+        }), 
+    });
+        if (!response.ok) {
+        const fallbackError = `Error trying to edit the experience`;
+        const data = await response.json().catch(() => { throw new Error(fallbackError);
+        });
+        const errorMessage = data?.detail ?? fallbackError;
+        throw new Error(errorMessage); }
+        return await response.json(); 
+    }
+
+    export default putExperience;   

src/components/ExperienceCard/ExperienceCard.css

@@ -1,22 +1,72 @@
 @import '../../index.css';
 
 .experience-card-container {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    /* Adjusted for row alignment */
-    justify-content: center;
-    grid-gap: 20px;
-    background-color: #fff;
-    color: rgba(0, 0, 0, 0.87);
+    display: flex;
+    flex-direction: column;
     -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
     transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
     border-radius: 10px;
-    overflow: hidden;
-    max-width: 345px;
+    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 1), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
 }
 
-/* .experience-card-container {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    grid-gap: 20px;
-} */
+.experience-card-container .Project-image img {
+    width: 100%;
+    max-height: 250px;
+    border-radius: 10px 10px 0 0;
+}
+
+.experience-card-title {
+    padding: 1.5rem 1rem;
+}
+
+.experience-card-sub-title {
+    padding: 0 1rem 1rem;
+    font-size: 14px;
+}
+
+.experience-card-descriptions {
+    padding: 0 1rem;
+}
+
+.experience-card-link-icon{
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 1rem;
+}
+.experience-card-edit-section{
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 1rem 1rem 0;
+}
+
+img{
+    object-fit: cover;
+}
+
+@media screen and (min-width: 640px) {
+    .experience-card-container {
+        max-width: 290px;
+        flex-wrap: wrap;
+    }
+}
+
+@media screen and  (min-width: 768px) {
+    .experience-card-container {
+        max-width: 350px;
+        min-width: 250px;
+    }
+}
+
+@media screen and (min-width: 1024px) {
+
+}
+
+@media screen and  (min-width: 1280px) {
+
+}
+
+@media screen and (min-width: 1536px) {
+
+}