To set up routing with the reactjs-router library in the home pages so that we can proper flow of all the pages

At least add these three pages by default in the routes

• Add a "Top Categories" section below the Home Page
• It should have six cards (2X3):
  - Mithai Masti (Indian Sweets)
  - Nashta ( Indian Breakfast)
  - Chaat and Snacks
  - Fasting Food
  - Drinks
  - Main Course
  • Each card should have an image ( add some box-shadow to the card so that it is visible separately from the background-color) and on hover effect. Check Sample.
  • On Hover, there should be a button "Check Out" which would redirect to the particular page (to be created later. Keep # for now)

Directions

• The objective is to improve the SEO of the website
• Title and Description should be directly taken from the README.MD
• Sample Reference
• You may use the banner image in the readme (reduce size) for the cards
• Lookup different resources to learn how to optimize the SEO. There should be specific meta tags for Facebook, Twitter, Apple,etc
• Choose the keywords smartly.

In the contributions page when trying to view the GitHub profiles until unless the cursor is bought to the very end of their icon, the icon is not being responsive.
Hope it makes some sense, else I'll try adding a screenshot regarding the issue.

Directions

• Sample Reference
• Fields:
  • First Name
  • Middle Name [Optional]
  • Last Name
  • Email
  • Phone Number [Optional]
  • Message
  • There should be validation for the above fields
  • Add helper texts with a text transition for the above fields
  • Consult @anushbhatia for color and font suggestions
  • Make sure it is mobile responsive
  • Should be available at /contact

The image section of the home page is not responsive.

To apply the inter font family in the complete project.
Better to add it in index.css or globalstyle.css so that all the project can have it.

Also include the bold version of the font along side it.

To incorportate the mongo db connection with the website

To rearrange the code and clean it up a bit for new commers to work better on it.

src
├───assets
├───components
├───containers
└───index.js

Individual Component & Container Structure

component
├───component.jsx
└───component.css

Directions:

• Sample Reference: Project Maintainers + Clan of Contributor section
• Consult @anushbhatia for the colors and font
• The list of contributors is fetched using github
• The page should be mobile responsive
• The image,text, social handle links for @anushbhatia and me should be defined inside a JSON object so that it is easier to modify

Reference

• Color of the trackbar should be the shade of yellow as used on the rest of the website
• Don't forget to put the on hover effect

Directions

• @anushbhatia would help out choosing the color.

• Sample Reference

• Make sure it is mobile responsive

Replace all the existing css present in js file with their a proper css file.
Eg:
Structure like this
Home.js
Home.css
Rather Than only
Home.js

Remove all he css present in the JS File.

to make a section where we present our features

1. Replicate what is present in image 2
2. Adding an illustration along with the text to make it more attractive.

Have a separate page for now.

Self Explanatory

To add a functionality of adding a new recipe using a basic form with:
Name:
Instruction:
Images Link:

Directions:

• Create a simple footer for the website. Reference
• It should have the name of the website
• Try to add a tagline " Made with 💖 in India for the world"
• Feel free to add any micro animation or illustration

Self Explanatory

To create simple and minimal logo for the indokhaadyam
Reference

Sample Wireframe

Directions

1. Check out this for your reference. [Below Our Products Section]
2. The Text and numbers should be as defined above in the wireframe. Define them inside a JSON object so that it is easier to modify them later.
3. The effect should be mobile responsive.
4. This would be a separate standalone section (second one rather). Leave some space below the title accordingly
5. Make sure it is mobile responsive

To be able to display all the recipe data in the json format in the server

Will create a new contact us form with responsiveness & navbar in Contact Page.

The profile pictures of all the contributors has zoomed in wrt the container. I am attaching a screenshot

Directions

• Sample Reference
• Consult with @anushbhatia for the color and the font
• It should have Home, Categories, Contact, Blog, Team
• Make sure it is mobile responsive

Self Explanatory

The hamburger menu seems to be collapsing with the data

I can work to make it responsive and mobile friendly. Also i suggest to use tailwind CSS

To retrieve the data from the form in the fields and display these details in form fields
#70

Current Favicon is the basic react app logo modify it to the current logo present in the asset folder.

I have seen this project under JWOC but no issue is listed for contributor.

Directions:

• Sample Reference. We don't need any Contact Sales text as shown in the reference. Rather just two lines: the title of the project followed by "Made with 💖 in India for the foodies around the globe"
• @anushbhatia would provide the colors and the font recommendations.
• Add GitHub Microanimation and link to this repo. Reference

Self Explanatory

Directions

• Sample Wireframe

• Sample Reference

• Please make sure that the colors are consistent with the remaining website

Directions

• This should be a page that is loaded whenever a user looks up any resource (page) which does not exist
• It should have a "Go to Home" button in the center
• Be creative and add some animation/illustration which is consistent with the color theme and the same time resembles the project's idea revolving around food.
• Sample Reference
• Feel free to take inspiration from website like Codepen but refrain from copying it exactly!

For the Mongo DB database Inside the form give the functionality to update the details for the
after completing #70 you can use the same form for updating this data