arrlancore / react-coming-soon-template Goto Github PK

View Code? Open in Web Editor NEW

37.0 3.0 82.0 5.58 MB

Kick off your new website with "coming soon" starter template.

Home Page: https://react-coming-soon-template.netlify.com/

License: MIT License

JavaScript 77.94% CSS 19.24% HTML 2.82%

reactjs gatsbyjs

react-coming-soon-template's Introduction

React coming soon template

Kick off your new website with coming soon starter template. Coming soon website templates helps you to retain customers when you are busy in revamping your website.

The message you show in the coming soon plays a vital role in retaining the visitors and to collect new leads. So tailor the message to your audience and make a strong first impression for the new users. There are other two web elements: animated countdown timer and sign-up form.

🚀 Prerequisites

Yarn, follow the installation guide
Node.js
Firebase, if you want to hosting at firebase

    $ npm install -g firebase-tools

🚀 Quick start

Clone the repository. Update as you required and upload to your hosting.

Simple clone.

    $ git clone https://github.com/arrlancore/react-coming-soon-template.git
    $ cd react-coming-soon-template

Installation

    $ yarn

The following dependencies will be installed:

    gatsby: ^2.0.0
    gatsby-plugin-manifest: ^2.0.2
    gatsby-plugin-offline: ^2.0.5
    gatsby-plugin-react-helmet: ^3.0.0
    react: ^16.5.1
    react-dom: ^16.5.1
    react-helmet: ^5.2.0

Customising

Type your own header, message and set the timer in index.js.
Add your own background image in layout.css.

To set timer add props date and time at Timer component, example:

<Timer  date="10/31/2018" time="19.00">

Deployment

Deploying with firebase CLI

Build Project

$ yarn build

Upload to Firebase.

$ firebase login
$ firebase init
$ firebase deploy

Deploying with netlify
- Sign up with Github/Gitlab/Bitbucket or Email
- Connect to Git Provider
- Authorize Git Provider
- Pick Your Repository
- Select Branch to Deploy (Default: master)
- Change the build command to yarn build
- Click Deploy button

License

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

react-coming-soon-template's People

Contributors

Stargazers

Watchers

Forkers

rifrayugo aprisyta ashokkarale qo2770 arjunkesava suulola eeshdarthvader alexoragz shadmanwaris bhagyavithana gurpreet-hanjra sylvia13 anchalvatre nwyll aparnagireesan juancjara ulziibuyan vasyldzhala thomasnolte clariokids sameer0303 richardmcsorley ongzx jgilbertcastro alaminopu jitusd9 dandara-bm jampow travisallen6 wysher romene boids-ai yelayou calvinchrst amdefiguy co360 etradingindia icaroo shashank1411-pixel akillika grcommerce bunsdev mapleburger khairi96 ishida83 munna-alexander lima-tembe omarelghati kgeonw chainwhiz noorqureshi sholeyegbengs gameshakes gauravahujame bildnw deboajagbe jephtah haroonrasheed87 dancywritter rynixelchavo ken1800 dev3irtech mohamed-abubucker service-grabbit mintme121 ni3-kdm metafinx s8rr travisnode mariemamorr louijose wqkl philliy the-tech-musketeers blkluv sikhgpt neybapps larrykarani digitives arshad1

react-coming-soon-template's Issues

Build static site

Deploy a demo site on firebase, netlify, etc Then add demo link at readme.md

Add new props "time" for countdown timer component

Currently, we already have a countdown timer component, but it still use date for the parameter. It will be good if we can also add specific time for the countdown time.

Current props:
date="10/30/2018"
Expected:
date="10/30/2018"
time="18.00"

Readme.md still not informative, add more knowledgeable

Add prerequisite on readme.md and minimum requirement.

Use react particleJs

Lets make the cool background with react particleJs.

Add how to deploy steps

Add deployment step on readme.md

Github pages not load timer count down

After build the github pages to https://arrlancore.github.io/react-coming-soon-template/ , timer count down doesnt work

Testing script

create script testing for quality assurance, it can use jest.

Connect form to mailchimp

Connect email form to mailchimp, so all data save on the mailing list of mailchimp

Add documentation how to build on netlify at readme

We already have documentation to deploy on firebase and will be good to add new documentation deploying at netlify.

Countdown timer feature

Add countdown time, so the visitor will know when the website will launch

Unit testing for timer component

Will be better if we can have some specific testing for our <Timer /> component, so we can sure it will not breaking in the future.

Github pages not load images

After build the github pages to https://arrlancore.github.io/react-coming-soon-template/ , image background is not appear.

Add social media icon

Need to add social media icon on the below of button, it might be linkedin, instagram, facebook and twitter. Icon can be from material icon, simpleicons.org, etc. Please use white color for the icon.

Configurable background image

It will be better if we can setting the background image via props of layout component, so no need to change css file if we want to change the background.

Add feature auto sliding image for the background

Now its only have a static background for the main page coming soon. It will be great if we can add multiple image background with autoplay slides. and free to use any slides image library such us react slick, etc.