Expice - Gatsby static site with blog backend on WordPress

Application Demo

Live link: Expice web app

Table of contents

• Info
• Technologies
• Application description
• Setup
• Deployment

General info

"Expice" is a restaurant multipage website. It is a frontend web application developed as a pet project, where Gatsby framework is connected to WordPress CMS, which sends blog posts data for static site generation using GraphQL.
All new added posts in WordPress are synced with Netlify platform, where frontend app is published, so each time user adds new blog post in WordPress CMS app is automatically rebuilded on Netlify.

Figma project: Link

Technologies

• Gatsby v5 React-Based Framework for SSG. Used plugins:
  • gatsby-plugin-image
  • gatsby-plugin-nprogress
  • gatsby-plugin-react-helmet
  • gatsby-plugin-sass
  • gatsby-plugin-sharp
  • gatsby-source-filesystem
  • gatsby-source-wordpress
  • gatsby-transformer-json
  • gatsby-transformer-sharp
• React: Router, Hooks, Context API
• TypeScript
• Sass
• GraphQL
• Wordpress (as blog posts backend)
• SwiperJS (slider)
• Stripe (payments)
• Firebase authentication with Google provider
• Markdown for blog posts
• Prettier
• Eslint

Application - page description

Main Page

Blog posts list

Shop items list

Blog post page (Post data from Wordpress)

Blog post page (Post data from Markdown file)

Netlify form submission (Send form to site owner via Netlify Forms)

Netlify Forms were used in application for form submitting: Netlify Forms setup.

React Context color form theme switch

Burger menu for mobile phones

Logged-in user

Setup

To run this project locally clone repository:

git clone git@github.com:rpavlenko/expice.git

Install dependencies:

npm install

Start local server:

gatsby develop

 

Deployment

Application is deployed on Netlify and is available at https://upbeat-jennings-ef82c3.netlify.app/