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.
- 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.
- 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.
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
To setup the project locally, follow these steps:
-
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
-
Navigate to the project directory:
cd vite-album-viewer/frontend
-
Install dependencies:
Using Yarn:
yarn install
Alternatively, using npm:
npm install
-
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
, andYOUR_APP_ID
with the actual values from your Firebase project credentials to enable Firebase services.
-
-
Running the application:
Using Yarn:
yarn dev
Alternatively, using npm:
npm run dev
-
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
-
The project includes ESLint for maintaining code quality.
-
To format your code, run:
Using Yarn:
yarn format
Alternatively, using npm:
npm run format
- 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
This project is licensed under the MIT License.