Photo Album Showcase

Introduction

Welcome to the Photo Album Showcase! This Next.js application, written in TypeScript, is designed to provide a beautiful and user-friendly way to showcase photo albums as well as an example of what I can develop given a prompt and a few hours.

View it live: photos.damc-dev.com

It currently uses the {JSON} Placeholder API's provided by Typecode to retrieve placeholder albums and photos.

The application was built with Typescript and leverages Next.js 13 and the power of SSR with their new App Router.

UI uses React.js Material UI.

The End-to-end test suite is implemented with Cypress.

Deployable to AWS with SST

The project is open source and licensed under the MIT License.

Installation

To get started with the Photo Album Showcase Application, follow these steps:

1. Prerequisites: Ensure you have Node.js and the AWS CLI installed on your machine and you are able to access your AWS account.

2. Clone the Repository: Clone this repository to your local machine using the following command:

   git clone https://github.com/damc-dev/photo-album-showcase.git

3. Install Dependencies: Navigate to the project directory and install the required dependencies:

   cd photo-album-showcase
   npm install

Running the Application

Running local only (No AWS Access required)

1. Start the arontend application: Start the development server:

   npm run dev:local

2. Access the Application: Open your web browser and visit http://localhost:3000 to use the application.

Running locally with AWS resource bindings

1. Start the local development environment: The sst dev command starts a local development environment called Live Lambda, that connects directly to AWS. Letting you set breakpoints and test your functions locally.

   npx sst dev

2. Start the frontend application: Now you can start your frontend in a seperate session. Under the hood it uses the sst bind command to connect your frontend to the backend.

   npm run dev

3. Access the Application: Open your web browser and visit http://localhost:3000 to use the application.

Testing

Currently only have end-to-end testing with Cypress, but have plans to add further testing. Don't forget to run the installation steps above.

• Run E2E test suite

  npm run e2e

• Run E2E test suite (Headless)

  npm run e2e:headless

Deployment

It is configured to deploy to AWS Cloudfront and AWS Lambda using SST

1. Prerequisites: Ensure you have the AWS CLI installed and are logged in to your account

2. Deploy

   npx sst deploy --stage prod

Usage

Once the application is running, you can easily navigate between photo albums and view photos:

• Home Page: Gives an overview of the application
• Albums Page: Displays a list of available photo albums.
• Album View: Click on an album to see its contents.
• Photo View: Click on a photo to view it in full size.

Try it out: photos.damc-dev.com

Here's a screenshot of the application's home page:

Here's how the albums page:

Here's the view of an album:

And here's the photo view:

Wow your still here, what a journey. Feel free to explore the application and enjoy the lovely placeholder photo albums!

Architecture Overview

The Photo Album Showcase web application is designed with a modern serverless architecture to ensure a smooth user experience and streamlined development and deployment processes.

ℹ️ For more details on the architecture decisions see Architecture Overview

Technology Choices

This project showcases the following skills and technologies:

• Next.js
• TypeScript
• React.js
• Material UI
• {JSON} Placeholder API's provided by Typecode
• Cypress
• SST
• AWS

ℹ️ For more details on the rationale see technology choices

Opportunities for Improvement

We believe in continuous improvement and welcome contributions from the community. Here are some areas where you can contribute to the project:

• Extend the application with backend features, authentication, and database integration.

• Implement continuous integration and continuous deployment pipelines.

• Enhance security practices and implement security testing.

• Add additional testing to ensure maintaibility and catch errors before they are deployed. Such as: Component Testing, Integration Testing, Unit Testing, and Performance Testing

• Add monitoring and alerting

Your contributions can make this project even better!

About Me

David McElligott

I'm a passionate full-stack developer and cloud architect with expertise in Sales Engineering, Application Development, Cloud Infrastructure, CI/CD, DevSecOps, Infrastructure as Code, and testing throughout the full software development life cycle (SDLC).

I am currently looking for my next role, if you have an open role or are interested in working together please reach out!

Lets Connect

Contributing

We welcome contributions from the community. If you'd like to contribute to this project, please read our contribution guidelines for more details.

License

This project is licensed under the MIT License - see the LICENSE file for details.