npm install
npm run dev
The registration page is the entry point for new users to create an account for access to the application's features. This document provides an overview of the registration functionality on the frontend.
To register as a new user, navigate to the following URL:http://localhost:3000/register
The registration form requires the following information:
- FirstName: The user's first name.
- LastName: The user's last name.
- Username: A unique identifier that the user will use to log in.
- Password: A secure password for account protection.
Follow these steps to create a new account:
- Fill in all the fields on the registration form.
- Click the
Sign In
button to submit the form. - Upon successful registration, you will be redirected to the login page.
The login page allows existing users to access their accounts by entering their credentials. This section explains how users can log in to the application through the frontend interface.
You can access the login page at:http://localhost:3000/login
To log in to the application, you will need to provide:
- Username: Your unique username associated with your account.
- Password: The password you set during the registration process.
Upon accessing the cart page, you will see the following information:
- My Points: Shows the total points available to you, which can be used for purchases.
- A list of Products added to the cart, including:
- Product image and name
- The points required for the product
- Quantity selector to adjust the number of items
- The total points for that product based on quantity
- A delete button to remove the item from the cart
- Update Quantity: To change the quantity of an item, use the quantity selector next to the product.
- Remove Items: To remove an item from your cart, click the 'Delete' button associated with the item.
- Review Total Points: At the bottom of the list, the total points for all items in the cart are displayed.
Once you have reviewed your items and are ready to purchase:
- Verify that you have enough points available for the purchase.
- Click the 'Buy' button located below the total points summary.
- You will be guided through the checkout process to complete your purchase.
The "My Orders" page provides a comprehensive view of all your completed and pending orders. It enables you to track the status of your purchases and perform actions such as viewing detailed order information or canceling an order if necessary.
To view your orders, click on the "My Orders" link typically located in the user profile menu or navigate directly to:http://localhost:3000/order
On the "My Orders" page, you will find the following information for each order:
- Order ID: The unique identifier for your order.
- Total Point Payment: The total points spent on the order.
- Status: The current status of your order (e.g., Pending, Completed, Shipped).
- Action: Buttons for "Detail" to view more information about the order, and "Cancel Order" to cancel the order if it is still in a cancellable state.
- Viewing Order Details: Click the 'Detail' button corresponding to an order to see its full details, including items purchased, shipping information, and transaction history.
- Canceling an Order: If an order is in a 'Pending' status and you wish to cancel it, click the 'Cancel Order' button. Please note that orders may only be canceled within a specific timeframe after placing the order.
The "Order Details" page offers an in-depth look at the specific items that make up an order. This interface allows users to review the individual products, their quantities, and associated points within an order.
When you view the details of an order, the following information is displayed for each item:
- Title: The name of the product.
- Writer: The author or creator of the product.
- Cover Image: A visual representation of the product.
- Tag: Labels that categorize the product, such as 'fiction' or 'science'.
- Quantity: The number of units of the product ordered.
- Point: The cost in points for each unit of the product.