Make Card for successful entry of Sections

[AnkitGurwan]

Make a card for the successful entry of sections: experience, education, awards, skills, etc. Currently, successful entry is just words/input written in a vertical order. Make the width of experience, education and awards section same as the input sections but in case of skills try making small rounded (not fully) rectangles. Give proper border-radius and background shadow(if possible).

NOTE: Do write comments in your code and write the code in separate files and import those files in the main page. Give meaningful names to files and variables . Kindly avoid the authentication for now. Directly go to http://localhost:3000/portfolio

[Utkarsh-ver]

can u assign this to me...I want to work on it

[AnkitGurwan]

@Utkarsh-ver do you have any idea for the design?

[HarshMakadiya]

@AnkitGurwan Hey there, Can I work on this issue?

[Maharsh04]

Hey !! Can I work on this issue?

[AnkitGurwan]

Guys, you can share your ideas (mainly about how you are going to place the input values in the card just a rough idea). Also tell if you can make the successful entry editable?

[HarshMakadiya]

I think a drop down model would work and upon click on edit the values will be filled we can make it editable and save it in our database.

[AnkitGurwan]

@HarshMakadiya What we are thinking for now is not to make request to backend and database for each input submission or a successful entry. Rather, we will give a save button for saving the progress which will go on to save the data in database. Can you save the successful entry on the client side and make it editable using redux?

[AnkitGurwan]

@HarshMakadiya let me clarify more, you don't have to build the save functionality to save the data in database. You just have to implement redux and store the successful entries and show them as card below the input section and make that card editable.

[HarshMakadiya]

Is there any redux boilerplate implement inside this repo? Or have to implemented from Scratch?

[AnkitGurwan]

Yes, many have used it. I am assigning this to you. If you face any difficulties you can contact me. Don't make it late than Saturday EOD.

[HarshMakadiya]

@AnkitGurwan thanks for assigning it to me. I will surely try to complete it by Saturday.

[HarshMakadiya]

Hey, @AnkitGurwan can you please guide me on how the card will work upon clicking it will represent details and upon change and click again it will represent details that are updated.

[AnkitGurwan]

For i.e. if someone fill the education section then put the entries of education section in a card and place it directly below the education section. More and more card of education section can be place below it. Similarly for other sections (experience, awards, interests, skills) .

Talking about how it works, you can give an update button or update icon on which if a user clicks user can update that particular card. Change the update icon to a save button after click. When user click on save, update the data in the redux.

[HarshMakadiya]

@AnkitGurwan Okay, for example in the below pic I have filled in the details, and it's directly below the experience section now I have to make it in a card format and also introduce an edit button to edit the card. Am I correct?

[AnkitGurwan]

Check it here

Just created a very rough design for you for education section. Similarly you can do with other section.

[HarshMakadiya]

Understood, Thanks for replying.

[AnkitGurwan]

You can take some extra time if you wish 😊

[HarshMakadiya]

@AnkitGurwan

you want something like this am I right? Don't worry about style I will manage it later.

[AnkitGurwan]

@HarshMakadiya exactly👍

[HarshMakadiya]

Also one more thing, should i implement delete button inside edit box on bottom right corner? @AnkitGurwan

[AnkitGurwan]

Yes. For skills only delete button will work (edit not required).

[HarshMakadiya]

would this style work for education?

@AnkitGurwan

[AnkitGurwan]

Can you make design similar to the design I provided? That has better readability rather than a normal vertical order of information.

[HarshMakadiya]

Sure I will try my best! What kind of design will appear upon edit icon click? can you please guide me on that? @AnkitGurwan

[AnkitGurwan]

design will not change. Just the information on card will become editable. In the design earlier shared, these are not values they are inputs. When we click on edit, value of these can be changed. Hope, that helps.

[HarshMakadiya]

I got it! I will complete the education card and ping you here! Thanks for the clarification.

[HarshMakadiya]

@AnkitGurwan Can you please confirm this design? or should I change any thing?

[AnkitGurwan]

Yaa it looking good but don't omit any information like the name of college and add hyphen in date in your card.

[HarshMakadiya]

https://github.com/swciitg/PortfolioBuilder/pull/28#issue-1931714027 @AnkitGurwan Can you please check my pr?