Skip to content

A responsive web application that showcases user data and their albums using the JSONPlaceholder API. Users can view information, album counts, and navigate through individual albums seamlessly.

License

Notifications You must be signed in to change notification settings

preston-56/vite-album-viewer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Album Viewer

Album Viewer is a responsive web application that provides an intuitive platform for displaying user-related data and their associated albums, utilizing the JSONPlaceholder API.

This application enables users to effortlessly navigate through user information, view album counts, and access individual album pages, ensuring a seamless experience across mobile, tablet, and desktop devices.

Features

  • User Authentication: Secure login via familiar auth providers (Google).
  • User List: Displays all users along with the number of albums each user has.
  • User Albums: View detailed information for a selected user, including their albums.
  • Album Details: Access photos within an album, with functionality to edit photo titles.
  • Responsive Design: Optimized for mobile, tablet, and desktop layouts.

Technologies Used

  • Frontend Framework: React with TypeScript
  • Build Tool: Vite
  • Styling: Chakra UI
  • Testing: Vitest for unit testing components
  • State Management: Context API for user authentication and data handling
  • Linting: ESLint configured to ensure code quality
  • Firebase: For enabling Google Sign-In authentication and managing web application configurations, including environment settings for user authentication.
  • Google Cloud Console: For managing cloud resources and permissions, allowing the application to interact with Firebase configurations when hosted on Netlify.

Prerequisites

Before setting up the project, make sure you have the following installed:

  • Node.js: Version 18 or higher is required. You can download it from Node.js official website.

  • Yarn: The project is built with Yarn, though npm can be used as an alternative. Install Yarn globally using npm:

    npm install --global yarn
    

Installation

To setup the project locally, follow these steps:

  1. Clone the repository:

    For SSH, use:

    git clone git@github.com:preston-56/vite-album-viewer.git

    For HTTPS, use:

    git clone https://github.com/preston-56/vite-album-viewer.git
  2. Navigate to the project directory:

    cd vite-album-viewer/frontend
  3. Install dependencies:

    Using Yarn:

    yarn install

    Alternatively, using npm:

    npm install
  4. Set Up Firebase Environment Variables:

    • Make sure to create a .env file in the root of your project(frontend) and add the following variables:

          VITE_API_KEY=YOUR_API_KEY
          VITE_AUTH_DOMAIN=YOUR_AUTH_DOMAIN
          VITE_PROJECT_ID=YOUR_PROJECT_ID
          VITE_STORAGE_BUCKET=YOUR_STORAGE_BUCKET
          VITE_MESSAGING_SENDER_ID=YOUR_MESSAGING_SENDER_ID
          VITE_APP_ID=YOUR_APP_ID
      
    • Replace YOUR_API_KEY, YOUR_AUTH_DOMAIN, YOUR_PROJECT_ID, YOUR_STORAGE_BUCKET, YOUR_MESSAGING_SENDER_ID, and YOUR_APP_ID with the actual values from your Firebase project credentials to enable Firebase services.

  5. Running the application:

    Using Yarn:

    yarn dev

    Alternatively, using npm:

    npm run dev

Testing

  • The frontend includes Vitest as the testing framework to run tests for the components and ensure their functionality.

  • These tests are located in the src/test/ directory.

  • To run the tests for the components(Home and Users), use:

    Using Yarn:

    yarn test

    Alternatively, using npm:

    npm run test

Code Quality

  • The project includes ESLint for maintaining code quality.

  • To format your code, run:

    Using Yarn:

    yarn format

    Alternatively, using npm:

    npm run format

Deployment

  • This application (frontend) is hosted on Netlify as a deployment service with a free tier.
  • The deployment is automated through pipeline jobs to ensure seamless updates after checks have been met.
  • The application can be accessed here

Vault Album Viewer

Album Viewer

View Application

License

This project is licensed under the MIT License.

About

A responsive web application that showcases user data and their albums using the JSONPlaceholder API. Users can view information, album counts, and navigate through individual albums seamlessly.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published