Programming Question

Description

Objective

Implement the frontend of your full stack web application using React or NextJS and ShadCN UI. The frontend should interact with the backend you created in the previous assignments, ensuring user authentication and data retrieval from your database (PostgreSQL, MySQL, or MongoDB). Additionally, create responsive designs for both mobile and desktop versions.

Part 1: Project Setup

1. Environment Setup:
   • Set up your React project using Create React App or your preferred boilerplate.
   • Install the necessary packages:
     • React Router (for routing)
     • Axios (for making HTTP requests)
     • ShadCN UI (for UI components)
     • Any additional libraries you may need (e.g., form handling, state management).
2. Project Structure:/your_project_name ├── src │ ├── components │ ├── pages │ ├── App.js │ ├── index.js │ └── api │ └── api.js └── package.json

Part 2: User Authentication

1. Create Authentication Pages:
   • Implement user registration and login pages.
   • Use ShadCN UI components for form design.
2. Manage Authentication State:
   • Use React’s Context API or a state management library (like Redux) to manage the authentication state.
   • Implement logic to store and retrieve the authentication token from local storage.

Example of a login form component:

import React, { useState } from 'react';
import axios from 'axios';
import { Button, Input } from '@shadcn/ui';

const LoginForm = ({ setAuth }) => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleLogin = async (e) => {
        e.preventDefault();
        try {
            const response = await axios.post('/api/login', { email, password });
            localStorage.setItem('token', response.data.token);
            setAuth(true);
        } catch (error) {
            console.error('Login failed:', error);
        }
    };

    return (
        
             setEmail(e.target.value)} placeholder="Email" />
             setPassword(e.target.value)} placeholder="Password" />
            Login
        
    );
};

export default LoginForm;
    

Part 3: API Integration

1. Set Up Axios for API Calls:
   • Create an api.js file in the api directory to handle all API requests.
   • Set up Axios with the base URL pointing to your backend.

Example of Axios setup in api.js:

import axios from 'axios';

const api = axios.create({
    baseURL: 'http://localhost:8000/api', // Replace with your backend URL
});

export default api;
    

Fetch Data from the Backend

1. Create components to fetch and display data from your backend (e.g., user profiles, product listings).
2. Use useEffect to call the API when the component mounts.

Example of fetching user data:

import React, { useEffect, useState } from 'react';
import api from '../api/api';

const UserProfile = () => {
    const [user, setUser] = useState(null);

    useEffect(() => {
        const fetchUser = async () => {
            const token = localStorage.getItem('token');
            const response = await api.get('/users/profile', {
                headers: { Authorization: `Bearer ${token}` },
            });
            setUser(response.data);
        };

        fetchUser();
    }, []);

    return user ?

{user.name}

 :

Loading…

;
};

export default UserProfile;
    

Part 4: Responsive Design

1. Create Mobile and Desktop Versions:
   • Ensure that your application is responsive, adjusting layouts for both mobile and desktop screens.
   • Use CSS media queries or a responsive design framework.
2. Implement Responsive Components:
   • Use ShadCN UI components to create a consistent look and feel across devices.

Part 5: Testing Your Application

1. Test User Flows:
   • Ensure that user registration, login, and data fetching work seamlessly.
   • Test the application across different browsers and devices.
2. Write Unit and Integration Tests:
   • Use libraries like Jest and React Testing Library for unit testing.
   • For integration tests, consider using Cypress or Testing Library.
3. Add UI Tests:
   • Use tools like Storybook for UI component testing.
   • Consider Playwright or Selenium for end-to-end testing.

Extra Credit Opportunities

• Docker Compose Setup:
  • Create a docker-compose.yml file to set up your application for easy usage and deployment.
• Adding UI Tests:
  • Implement UI tests using:
    • Storybook
    • Playwright
    • Cypress
• Adding Unit and Integration Tests:
  • Write comprehensive tests using:
    • Jest
    • React Testing Library
    • Cypress for end-to-end tests.
• Make Your Website Cyber Secure:
  • Implement best practices for web security, such as:
    • HTTPS
    • Input validation and sanitization
    • Secure token storage
• Use Figma for Website Design:
  • Create your UI/UX design using Figma, and implement the designs in your React application.

Submission Guidelines

• Ensure your code is clean, well-organized, and well-documented.
• Submit your project in a ZIP file, including your package.json and any other relevant files.
• Include a README file with instructions on how to set up and run your application.

Grading Criteria

• Successful implementation of user authentication
• Correctness and completeness of API integration
• Quality of UI design using ShadCN UI
• Responsiveness and accessibility of the application
• Quality of tests and documentation
• Completion of extra credit tasks

Good luck! This assignment will help you develop your frontend implementation skills using React and ShadCN UI, while integrating with your backend and enhancing your application’s quality.