Frontend - Project Card

[minhngo3818]

This task is purely styling and html. Use Tailwind for styling.

Notes: Do not install unnecessary icon packages. This will increase bundle size and slow down the performance. If need an icon, copy its React component to ~/client/src/assets/icons/icons.jsx. You can style it with inline Tailwind if necessary

Icon sources: icones, iconfy

Props:

• title: string
• description: string
• status: string
• demo: string
• image: string
• github: string
• discord: string

Styling details:

• Card:
  • dimension: 360x360px,
  • corner radius: 20px
  • background-color: #2A2C2E,
  • drop shadow,
  • float up effect on hover
  • text color: white
  • padding: 10-20
  • all child components align to left except Image/Icon
• Image/Icon:
  • dimension: 80x80px
  • color: #ff9617 or #2196f3
• Title:
  • font-size: 24px
  • color: white
• Description:
  • text color: #F5F5F5
  • font-size: 16px
  • limit to 4 lines
  • if text is longer than the limit, show dots at the end of 4th line
• Status
  • Label: color -> white, font-size -> 16px
  • Status: text same as the label,
  • Status colors: On going - #4CDC4C, Inactive - #f1c40f, Completed - #3498db, Canceled - #ff2d55
  • Recommend creating a helper function to switch status color
• Url
  • Border: circle, 1px, white, change color to #ff9617 on hover, size 40x40px
  • Icon
  • Add a tooltip on hover
  • group 3 url under a div element
  • set inline with Status

Demo

White frame:

[shyamtawli]

I am not familiar with Tailwind, can I do this in pure css?

[codebysid]

could you please tell me that is this need to be implemented in a new component or not ? and if yes then where i put it on the screen ? and from where this project card fetch the data ?

[minhngo3818]

@shyamtawli, please use Tailwind for the final version of your pr. If you're using CSS well, it should take a short time to get used to Tailwind, because it's similar to CSS classes provided by someone for you but more primitive.

[minhngo3818]

@codebysid Yes, this is a new component. The component will be rendered on the Project page. The data is fetched from the backend API, whose codes are in the backend folder. The API has not been implemented. If you want to test how it looks, I recommend creating dummy data. Check its data model under ~<root>/backend/models/projects/projects-model.js for more info.

[codebysid]

@minhngo3818
okay so i'll implement this component with the dummy data ,if you could assign me this pls

[codebysid]

@minhngo3818 i found a file named as fakeProjectsData.jsx which have some dummy data like the schema you mentioned so should i use that or i create a separate one? also this data doesnt have any image so for that should i use a icon or a image link?

[minhngo3818]

You can use data in that file and add image url. It's created to test the component, so you can modify the file if you like.

[codebysid]

@minhngo3818 okay and one more thing , tailwindCSS is not latest version and because of that i cant use some classes so should i install the latest packages because in this issue its mentioned to keep the bundle size low or should i use raw css ?

[minhngo3818]

Good question! You can update tailwindCSS. It doesn't affect much to the bundle size much. Just make sure the UI renders well after the installation.

[hetashridk]

Hey, @minhngo3818 is the above things is done, if not then please assign me. I know tailwind css very well.

[minhngo3818]

@hetashridk It's almost done under pr #143. Please pick other issues.