Mini Project

with 3days code onfire and slice based on design, whuaaaaa well, this is how i am hit this chalange

Stack i use

1. ReactJs
2. Styled-components for styling cos like SCSS/SASS
3. Axios

Day 1

1. collect the assets from figma
2. setup basic workspace
3. transform svg file into jsx

ex:

import * as React from "react";

const Heart = () => {
  return (
    <>
      <svg
        width="86"
        height="86"
        viewBox="0 0 86 86"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <title>Heart</title>
        <path
          d="M43.0085 0C42.4836 0 42.0603 0.423312 42.0603 0.948218V6.11262C42.0603 6.63753 42.4836 7.06084 43.0085 7.06084C43.5334 7.06084 43.9567 6.63753 43.9567 6.11262V0.948218C43.9567 0.423312 43.5334 0 43.0085 0Z"
          fill="#40596B"
        />
        <path
          d="M43.0085 78.9392C42.4836 78.9392 42.0603 79.3625 42.0603 79.8874V85.0518C42.0603 85.5767 42.4836 86 43.0085 86C43.5334 86 43.9567 85.5767 43.9567 85.0518V79.8874C43.9567 79.3625 43.5334 78.9392 43.0085 78.9392Z"
          fill="#40596B"
        />
        <path
          d="M26.5501 3.26788C26.0591 3.47107 25.839 4.02984 26.0252 4.52088L28.0063 9.29584C28.2095 9.78688 28.7683 10.007 29.2593 9.82074C29.7504 9.61755 29.9705 9.05878 29.7842 8.56774L27.8031 3.79278C27.5999 3.30174 27.0412 3.06469 26.5501 3.26788Z"
          fill="#40596B"
        />
        <path
          d="M56.7574 76.2131C56.2664 76.4163 56.0462 76.975 56.2325 77.4661L58.2136 82.241C58.4168 82.7321 58.9756 82.9522 59.4666 82.7659C59.9577 82.5627 60.1778 82.004 59.9915 81.5129L58.0104 76.738C57.8072 76.23 57.2485 76.0099 56.7574 76.2131Z"
          fill="#40596B"
        />
        <path
          d="M12.5977 12.5977C12.2252 12.9703 12.2252 13.5798 12.5977 13.9523L16.2552 17.5928C16.6277 17.9653 17.2372 17.9653 17.6098 17.5928C17.9823 17.2203 17.9823 16.6107 17.6098 16.2382L13.9523 12.5977C13.5798 12.2252 12.9703 12.2252 12.5977 12.5977Z"
          fill="#40596B"
        />
        <path
          d="M68.4239 68.4242C68.0514 68.7967 68.0514 69.4062 68.4239 69.7788L72.0813 73.4362C72.4538 73.8087 73.0634 73.8087 73.4359 73.4362C73.8084 73.0637 73.8084 72.4541 73.4359 72.0816L69.7616 68.4242C69.3891 68.0516 68.7964 68.0516 68.4239 68.4242Z"
          fill="#40596B"
        />
        <path
          d="M3.26788 26.5501C3.06469 27.0412 3.30174 27.5999 3.79278 27.8031L8.56774 29.7842C9.05878 29.9874 9.61755 29.7504 9.82074 29.2593C10.0239 28.7683 9.78688 28.2095 9.29584 28.0063L4.52088 26.0252C4.02984 25.839 3.47107 26.0591 3.26788 26.5501Z"
          fill="#40596B"
        />
        <path
          d="M76.2132 56.7577C76.01 57.2487 76.2471 57.8075 76.7381 58.0107L81.513 59.9918C82.0041 60.1949 82.5629 59.9579 82.766 59.4669C82.9692 58.9758 82.7322 58.417 82.2411 58.2138L77.4662 56.2327C76.9751 56.0465 76.4164 56.2666 76.2132 56.7577Z"
          fill="#40596B"
        />
        <path
          d="M0 43.0085C0 43.5334 0.423312 43.9567 0.948218 43.9567H6.11262C6.63753 43.9567 7.06084 43.5334 7.06084 43.0085C7.06084 42.4836 6.63753 42.0603 6.11262 42.0603H0.948218C0.423312 42.0603 0 42.4836 0 43.0085Z"
          fill="#40596B"
        />
        <path
          d="M78.939 43.0085C78.939 43.5334 79.3623 43.9567 79.8872 43.9567H85.0516C85.5765 43.9567 85.9998 43.5334 85.9998 43.0085C85.9998 42.4836 85.5765 42.0603 85.0516 42.0603H79.8872C79.3623 42.0603 78.939 42.4836 78.939 43.0085Z"
          fill="#40596B"
        />
        <path
          d="M3.26788 59.4669C3.47107 59.9579 4.02984 60.178 4.52088 59.9918L9.29584 58.0107C9.78688 57.8075 10.007 57.2487 9.82074 56.7577C9.61755 56.2666 9.05878 56.0465 8.56774 56.2327L3.79278 58.2138C3.30174 58.417 3.06469 58.9758 3.26788 59.4669Z"
          fill="#40596B"
        />
        <path
          d="M76.2131 29.2593C76.4163 29.7504 76.975 29.9705 77.4661 29.7842L82.241 27.8031C82.7321 27.5999 82.9522 27.0412 82.7659 26.5501C82.5627 26.0591 82.004 25.839 81.5129 26.0252L76.738 28.0063C76.23 28.2095 76.0099 28.7683 76.2131 29.2593Z"
          fill="#40596B"
        />
        <path
          d="M12.5977 73.4191C12.9703 73.7916 13.5798 73.7916 13.9523 73.4191L17.6098 69.7617C17.9823 69.3892 17.9823 68.7796 17.6098 68.4071C17.2372 68.0346 16.6277 68.0346 16.2552 68.4071L12.5977 72.0645C12.2252 72.437 12.2252 73.0466 12.5977 73.4191Z"
          fill="#40596B"
        />
        <path
          d="M68.4239 17.5929C68.7964 17.9654 69.406 17.9654 69.7785 17.5929L73.4359 13.9355C73.8084 13.563 73.8084 12.9534 73.4359 12.5809C73.0634 12.2084 72.4538 12.2084 72.0813 12.5809L68.4239 16.2552C68.0514 16.6278 68.0514 17.2204 68.4239 17.5929Z"
          fill="#40596B"
        />
        <path
          d="M26.5501 82.749C27.0412 82.9522 27.5999 82.7151 27.8031 82.2241L29.7842 77.4491C29.9874 76.9581 29.7504 76.3993 29.2593 76.1961C28.7683 75.9929 28.2095 76.23 28.0063 76.721L26.0252 81.496C25.839 81.987 26.0591 82.5458 26.5501 82.749Z"
          fill="#40596B"
        />
        <path
          d="M56.7574 9.8039C57.2485 10.0071 57.8072 9.77003 58.0104 9.27899L59.9915 4.50404C60.1947 4.01299 59.9576 3.45422 59.4666 3.25103C58.9756 3.04784 58.4168 3.2849 58.2136 3.77594L56.2325 8.55089C56.0462 9.04194 56.2664 9.60071 56.7574 9.8039Z"
          fill="#40596B"
        />
        <path
          d="M55.7416 20.6577C50.5603 20.6577 45.9716 23.096 43.0084 26.8719C40.0452 23.096 35.4396 20.6577 30.2752 20.6577C21.3348 20.6577 14.0708 27.9048 14.0708 36.8621C14.0708 52.186 43.0084 70.9133 43.0084 70.9133C43.0084 70.9133 71.946 52.44 71.946 36.8621C71.946 27.9217 64.6989 20.6577 55.7416 20.6577Z"
          fill="#FF7058"
        />
      </svg>
    </>
  );
};

export default Heart;

Day 2

This is fire day with my leptops, and coffee

1. Hard coded styling
2. Organized components folder
3. add sample management state using useContext from react API
4. Setup Fetch API and handleSubmit and then display the error message

Day 3

Last day until deliver this progress

1. Check Error
2. Github setup
3. Deploy
4. finished Documentation Solution

Thankyou :)