B9 A10 Type-02 Requirements

Task Description
We are going to make an Art & Craft Store website. You need to make a website
with an Arts & Craft theme, but that doesn't mean any arts & crafts items! We're
focusing on a particular category.

Website Themes: (Art & Craft Store)

Six unique Art & Craft categories are listed here. From the list below, choose a
category to start developing your website. Your website should only have one
kind of Art & Craft category. You cannot use subcategories from other
categories on your website. For example, you cannot use subcategories from
Sculpture and Modeling if you choose the Painting and Drawing category. Your
entire website with all data and information should be based on your selected
category. You need to create craft item/product data based on the subcategory
of your selected category. For better understanding, we have added some arts
& crafts item examples for corresponding subcategories. You have to create
data for these types of arts & crafts items.

1. Painting and Drawing

a. Landscape Painting: Mountain view canvas, Forest based Landscape
painting,
b. Portrait Drawing: Pencil Sketch Portrait, Ink Outline Portrait, Acrylic
Portrait Canvas
c. Watercolour Painting: Floral Watercolor Art, Animal Watercolor Portrait
d. Oil Painting: Realistic Oil Portrait, Abstract Oil Painting
e. Charcoal Sketching: Figure Charcoal Sketch, Architectural Charcoal
Drawing
f. Cartoon Drawing: Comic Strip Drawing, Superhero Cartoon Design

2. Sculpture and Modeling

a. Clay Sculpture
b. Stone Sculpture
c. Metal Sculpture
d. Food carving
e. Natural Material Sculpture
 f. Beaded Sculpture
3. Textile Arts
a. Embroidery
b. Knitting & Crocheting
c. Quilting
d. Beadwork
e. Tie-Dyeing
f. Macrame

4. Paper Crafts & Glass Art

a. Card Making
b. Scrapbooking
c. Paper Quilling & origami
d. Glass Painting
e. Lampworking
f. Glass Dying & Staining

5. Ceramics and Pottery

a. Clay-made pottery
b. Stoneware
c. Porcelain
d. Terra Cotta
e. Ceramics & Architectural
f. Home decor pottery

6. Jute & wooden Crafts

a. Wooden Furniture & Sculptures
b. Wooden Home Decor
c. Wooden Utensils and Kitchenware
d. Jute Home Decor
e. Jute Kitchenware & utensils
f. Jute and wooden jewellery

Main Requirements:
Key Rules:

● Include a minimum of 15 notable GitHub commits on the client side

● Include a minimum of 8 notable GitHub commits on the server side
● Add a meaningful readme.md file with the name of your website and a live
site URL. Include a minimum of five bullet points to feature your website.
Write your selected category's name here.
● Make it responsive for all devices. You need to make it responsive for
mobile, tablet and desktop views.
● After reloading the page of a private route, the user should not be
redirected to the login page.
● Use the Environment variable to hide the Firebase config keys and
Mongodb credentials.
● Don’t use any Lorem ipsum text; you can not use the default alert to show
any error or success message.

1. Ensure that your design is creative and unique. Choose the type of
website you wish to create first. Next, look for ideas for the design on the
internet or by visiting websites such as ThemeForest. But keep in mind
that your idea for a website should look different from any past projects
of yours or any of the samples from our modules or conceptual sessions.

🎯You can also look for free resources on blogs to help with your website.
https://bootcamp.uxdesign.cc/free-images-and-resources-collection-for-
website-c77f2fc46ce5

2. Navbar: The navbar will contain the

● Website name/logo,
● Home,
● All Art & craft Items,
● Add Craft Item(It will be a private/protected route. ),
● My Art&Craft List(It will be a private/protected route. ),
● “Login” and “Register”.

a. The “Login” and “Register” button is conditional, if the user is not

logged in it will show the “Login” and “Register” Button. If a user
 clicks on “Login” it will redirect to the login page. If a user clicks on
“Register” it will redirect to the Register page.

b. But If the user is logged in here you will show the user photoURL,
when you hover over the photoURL it will show the displayName.
And it will show the “Log out” button.

3. Login Page: When you click the login button on the navbar it redirects to
the login page. You have to use a password and email-based
authentication to log in. The login page will have-
a. Email
b. Password
c. Google login,
d. GitHub/Facebook/Twitter login - implement any of one
e. A link that will redirect to the Register page
🎯Here the email and password should match with the registered email
and password. If it doesn’t match, show an error. You can show an error
by using toast/sweet alert if you want.
4. Register Page: You have to use a password and email-based
authentication to register. The Register page will have the following -
a. Name
b. Email
c. photoURL
d. password
e. A Link that will redirect to the login page
★ For password verification you need to follow this -
● Must have an Uppercase letter in the password
● Must have a Lowercase letter in the password
● Length must be at least 6 character
★ If any of this isn’t fulfilled it will show an error/toast
 ★ After successful login or Register you need to show toast/sweet
alert
🎯Don’t implement email verification or forget password method as it will
inconvenience the examiner. If you want, you can add these after receiving the
assignment result.

5. Home Page: The home page will have the following sections- Navbar,
Banner/Slider, Craft items section, Art & Craft Categories Section, 2 Extra
Sections, and Footer.

🎯 Make sure to keep the navbar and footer on all the pages except the
404 page.

6. Banner: Add a slider (you can use any type of slider/carousel) with a
minimum of 3 slides and meaningful information

7. Craft Items Section: Here you will show at least 6 cards of craft items you
have added on database. You can show information as you want but make
sure that the UI looks good. There will be a “View Details” Button which
will redirect you to the “View Details page”.

8. Extra Section: Add 2 relevant and meaningful extra sections mentioned

above on the Home page.

9. Add Craft Item Page: Create an Add Craft Item page where there will be a
form for the user to add an art & craft item. The form will have:

a. image ( use image URL)

b. item_name
c. subcategory_Name
d. short description
e. price
f. rating
g. customization- example- yes, no
h. processing_time
 i. stockStatus - example- In stock, Made to Order
j. User Email
k. User Name
l. “Add” button

This will be a private/protected route.

a. When you fill in the data and submit the “Add” button, these data
will be stored in your database and you will show a success
message through toast/sweet alert.

10. All Art & Craft Items page: Create an All Art & craft Items page where you
will see all the art & craft items all the users have added to the database.
You will get the data from the database and show it here in the table.
Each row of the item will have the following information:

a. 3-4 information about the art & craft item

b. “View Details” button – will redirect to the “View Details Page”

11. View Details Page: The Art & Craft Item detail route will be a
private/protected route. Please make sure that if the user is not logged in,
the private route redirects to the login page. On this page, you will show
all the information you have stored in the database.

12. My Art&Craft List: It will be a private/protected route. On this page, a user

can see all the arts & crafts he/she has added to the database. here a user
can only see his/her added data, but he/she can not access other's data.
Here you need to show the data in cards. Each card will contain this
information-
a. image
b. item_name
c. price
d. rating
e. customization- example- yes, no
f. stockStatus - example- In stock, Made to Order
g. “Update” Button
 h. “Delete” Button

● At the top of this page, there will be a dropdown menu where you will
implement filter functionality based on “customization”.

13. Update Page: When a user clicks on the “Update Button” it will take the
user to the Update page, where there will be a form for the user to update
an Art & Craft item. The form will have the following:
a. image
b. item_name
c. subcategory_Name
d. short description
e. price
f. rating
g. customization- example- yes, no
h. processing_time
i. stockStatus - example- In stock, Made to Order
j. “Update” button

This will be a private/protected route. When you fill in the data and submit
the “Update” button, these data will be updated to the previous data in your
database and you will show a success message through toast/sweet alert.

🎯🎯(Optional): If you don’t want to create an Update page, you can also use a
modal to update your data. For this when you click on the “Update” button it will
open a modal but make sure you are logged in before updating the data.

🎯For all the CRUD operations, show relevant toast/ notification/ anything with
a meaningful message
14. Delete Button- If the user clicks the delete button, the Art & Craft item will
be removed from the data. Before the delete, ask for a delete
confirmation.
15. Footer: Create a reasonable and meaningful footer. (including website
name, copyright, contact information, social media links)
16. 404 page: Add a 404 page/Not Found Page
17. Show a loading spinner when the data is in a loading state.
Challenges Requirements:

1. Art & Craft Categories Section: In this section, you will show at least 6 art
& craft subcategories information for your selected category. The
informations are - image, Subcategory name, and other info you want to
show you can use for each subcategory. (For this you need to create
another collection in your database and the subcategory names should
match with the art & craft data “subcategory_Name”.)

2. On clicking a “Art & Craft Categories Card” on the Home page it will
redirect the user to a page where the user can see all the arts and crafts
cards of that specific “subcategory”. Each art & craft item card will have:
a. image
b. item_name
c. subcategory_Name
d. short description
e. price
f. rating
g. processing_time
h. “View Details” button
This “View Details button” will redirect to the “View Details Page”.

3. Implement a dark/light theme toggle for the home page.

4. Explore this package and implement at least 2-
a. Lottie React
b. React-simple-typewriter
c. React Awesome reveal
d. React-tooltip

What to submit:
● Assignment Requirement Type
● Your client-side code GitHub repository
● Your server-side code GitHub repository
● Your live website link