Presenting Spacestagram, image-sharing from the final frontier.

• You can find the live deployment here
• Challenge specification

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

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

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.

yarn dev # npm run dev

yarn build # npm run build

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

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

Bootstrapped with my Next.js template.

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.

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

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