Scribd
Upload
48 views6 pages

DCIT 202 - Interim Assessment

The document provides instructions for a shopping app project for a class. Students must build a functioning e-commerce shopping app using React Native by certain deadlines. The app must include features like login, homepage with products, product details pages, shopping cart, checkout, and push code to GitHub. The project requirements specify what information and interactions each feature like products and cart must support. Relevant tutorials and design resources are provided.

Uploaded by

Kofi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
48 views6 pages

DCIT 202 - Interim Assessment

The document provides instructions for a shopping app project for a class. Students must build a functioning e-commerce shopping app using React Native by certain deadlines. The app must include features like login, homepage with products, product details pages, shopping cart, checkout, and push code to GitHub. The project requirements specify what information and interactions each feature like products and cart must support. Relevant tutorials and design resources are provided.

Uploaded by

Kofi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

DCIT 202 - Interim Assessment

Shopping App Project


Deadline: 5th November 2021, 11:55PM

You are required to build a functioning e-commerce shopping app using react native.

Instructions:

1. Initialize a new Expo project,


2. Create a new github account if you don’t have one.
3. Create a repository and upload your newly built expo project files.
4. Submit your ID and Repository Url (Deadline: Friday, 22nd October);
Upload your project here

If you’re not familiar with github here’s a tutorial


Intro to Git and Github
Git Training
5. Feel free to use any design of your choice. So make use of any package you think
will be helpful. Be creative

You can get some design inspirations from Design Inspirations or the assets i’ve
added to the file.

6. Try and push your code to github as and when you work on the project.
I won’t accept any code push after the deadline.

All the best

Refer to the project Requirement below.

Project Requirements.

Login
Design a login page to allow users to login. Log in fields should include username or
email, and password.

Homepage
The homepage can be in a list card design with each card representing a different
product. The page should scroll to allow users to scroll through multiple products.

From this home screen, the user should be able to access a settings menu and product
search bar. They should also be able to access their product cart.

Products Details
When a user clicks on a product, a detailed product detail page should open which
allows them to see all relevant informatÏion for a specific product.

Product information includes:

● Product Name
● Price
● Colors
● Sizes
● Reviews
● Product images
● Ft information (size/fit)
● Shop the look
● Customers also love
● Promo information

When a user lands on a product detail page, they should see all relevant information for
that specific product. In addition to the relevant product information, they should see all
the product images that are associated with each product. The user should be able to
scroll through the various images and tap on an image to enlarge it. The images should
be high fidelity, large images of the products.

The user also needs the ability to see the associated product color options, and switch
between each color. When they select a different color, they should see the color change
reflected in the images. The user wants the ability to toggle the new images with the
appropriate colors.

Additionally, the user wants the ability to see what sizes are available for the product
they are looking at. The size/product/color combination availability should be reflected in
the UI/UX so that the user can quickly understand which combinations are available.

Users also need the ability to add a product to their cart. When the user selects a
product and adds the product to their cart. The cart icon on the page should update with
a badge to reflect the product has been added to the cart. When the user adds a product
to the cart, the add to cart button should change to “go to cart”.

Cart

Users need the ability to quickly see the products they have in their cart. When the user
selects the cart, they should land on a page that shows all of the products they have
placed in the cart.

The information they should see includes:

● Product image
● Product name
● Size
● Color
● Price

From the cart, users want the ability to edit the products they have placed there. Tapping
the edit button should bring the user back to the Product detail page. Users also want
the ability to remove the product from their cart entirely.

The user should also see the price of the product and be able to update the quantity of
each individual product they have in the cart.

Additionally, the user should also see the total price of all the products they have in the
cart and how close they are to qualifying for free shipping or any other promotion.

Checkout

When a user enters secure checkout, they should have the option to enter their personal
shipping information. Fields include;

● Full Name
● Address
● Phone
● Email
Users should also have the ability to enter their payment information. The user should be
able to type in the credit card information or take a photo of their CC.

After the user enters all the relevant information they will then be prompted to confirm
their order and then checkout.

Once the user checks out, they should be prompted with a confirmation screen.

Relevant Links

https://reactnative.dev/docs/getting-started
https://docs.expo.dev
https://docs.expo.dev/versions/latest/sdk/async-storage/

You might also like