💎 Anne's Handmade

Handmade jewelry made with love.

Table of Contents

• Anne's Handmade
• Frontend Features
  • Next.js
  • Styled Components
  • Product Search
  • Payment Processing
  • Pagination
  • Admin Dashboard
  • SEO
  • Mobile Friendly
• Backend Features
  • Apollo Server
  • Prisma Database
  • Email Service
  • Permission System
• Testing
• Deployment

Frontend Features

Next.js

A server-side-rendered React application built with Next.js.

Styled Components

Styled Components addresses the styling needs of the entire site.

• A theme object is supplied to the ThemeProvider component. Green is the primary color, with black and pink highlights. Various grey tones are used add subtle emphasis. Raleway is the primary font, with Charmonman used sparingly.

• Animation created with keyframes helper function. When a category is hovered an overlay describing the category slides into view. There is also an enlargement and popout effect.

• Password input component which displays the quality of the password as it is typed. Using regular expressions and a scoring algorithm to calculate props sent to a styled component.

Product Search

Product search built with Downshift and Apollo Queries.

Payment Processing

Credit card payments are processed with Stripe Checkout and the Stripe API.

Pagination

Query parameters used to paginate and categorize catalog of products. Allows adjustable results per page and the ability to to narrow catalog by bead type or product type.

Admin Dashboard

Admin has ability to add/edit/delete products, including uploading images and toggling shipped status. React Tables helps sort, filter and organize inventory and sales data.

• Sales data sorted by the number of items per order. Provides a toggle button for shipped status and a link to the order on Stripe. Sub-table containing list of ordered items is open.

• Inventory data filtered by products containing the test "buddha" with a product type of "Necklace" and a bead type of "Black Onyx". The optional update product sub-table is open where any product information or image can be changed by the admin.

SEO

Dynamically render various tags with Next SEO based on the page being viewed. Offer a unique image and title for each product as well as an overall representation of the site with brand image. The result is that the site as a whole or a specific product can be shared on social media.

• Overall site social media post

• Product social media post

Mobile Friendly

Media queries restyle or add/remove components to look good on any size screen - mobile, tablet or desktop.

• Mobile (iPhone 6/7/8 Plus)
• Layout has a vertical alignment and the Header is simplified, omitting Search and other text.

• Tablet (iPad)
• Layout has a vertical alignment and the Header includes more features.

• Desktop
• Layout has a horizontal alignment as well as vertical, and the Header includes all features.

Backend Features

Apollo Server

Built with GraphQL. Playground helps test Queries and Mutations and is available on the backend at /graphql

Prisma Database

Seeded in development via Google Sheets API. All product data is persisted in a spreadsheet. This adds flexibility and convenience to the development process.

Email Service

Emails are sent to customers with a "Thank You" and order invoice when a transaction is complete. Users also recieve emails when they signup or request a new password. Emails are templated with MJML and sent with Nodemailer and SendGrid.

Permission System

Use resolver composition, JSON Web Tokens, cookies and user roles to control how users interact with the application. Users fall into three categories: unauthenticated, authenticated and admin. If user does not have permissions required for an operation an error thrown and displayed in the UI.

Testing

Tests are run with Jest and Enzyme. Much of the testing consists of using MockedProvider from React Apollo to supply fake data to various components. Components are then mounted in the test environment to ensure they render and function correctly. To JSON snapshots are kept and used to test the components, making sure that each new test matches the previous snapshot.

Deployment

The site is deployed in three parts to Heroku. The database, the backend and the frontend each stand alone and work in concert. As changes are made in development and committed to GitHub source control they first go through Travis, a continous integration service. The application is built and tested. As long as there are no errors and all tests pass the new code is deployed to Heroku where it is updated. This system helps keep serious bugs from making their way into production.