Presenting Spacestagram, image-sharing from the final frontier.

• You can find the live deployment here
• Challenge specification

🔍 Preview

📱 Mobile

💻 Desktop

📚 Table of Contents

• 🔍 Preview
  • 📱 Mobile
  • 💻 Desktop
• 📚 Table of Contents
• 🚀 Features
• 🔧 Getting Started
  • Run Development Environment
  • Build for Production
• 🎨 Design
• 👩‍💻 Technologies and Libraries Used
• ♿ Accessibility
• 🧪 Testing
• 📝 Notes

🚀 Features

The user may:

• Load 5 photos at a time
• Save liked photos to local storage
• Search for a specific photo by date
• View saved photos
• Double click a photo to like/unlike the photo
• Click on the heart icon to like/unlike a photo
• Click on the link icon to go to the direct search page
• Click on the outgoing icon to get the high definition photo
• Animations have been added to improve the user experience
  • Loading photos
  • Liking a post
  • And more

🔧 Getting Started

You can clone this repository by using the command line:

git clone https://github.com/vinhvn/shopify-frontend-challenge-w22 app
cd app
yarn # npm i

Remember to install dependencies after cloning it locally.

Run Development Environment

yarn dev # npm run dev

Build for Production

yarn build # npm run build

🎨 Design

All designs, including a design system, were created prior to any development, with a mobile first approach, and are available on Figma.

• Figma file
• Mobile
• Desktop

👩‍💻 Technologies and Libraries Used

• React
• TypeScript
• Date-fns
• Styled Components
• Twin.macro
• Jest
• NASA's APOD API

Bootstrapped with my Next.js template.

♿ Accessibility

This web application has a mobile design first principle and is fully responsive on mobile. It also has an accessibility score of 100 according to Google lighthouse. This was achieved using semantic elements and aria labels using a11yproject's checklist.

🧪 Testing

Unit tests have been written for all components using Jest. You can run all tests in watch mode by using the command line:

yarn test # npm run test

Alternatively, generate coverage by using the following:

yarn test:coverage # npm run test:coverage

📝 Notes

All components were developed from scratch and implemented based on the design system created for this challenge.