Create a React.js, Tailwind with i18n project in a couple of minutes from Github

gabriela

Gabi

Posted on February 13, 2020

Create a React.js, Tailwind with i18n project in a couple of minutes from Github

Alt Text

Why?
I am creating a short series for Template projects to boost my productivity when starting a new project from scratch.

If you are interested in a Template project with SpringBoot, Flyway, Java 11, Maven check out this project: https://dev.to/gabriela/create-a-springboot-flyway-project-in-a-couple-of-minutes-on-github-12jj

About this project:

To build the project locally, run:
NPM:
npm install
npm start

Yarn:
yarn install
yarn start

See the results
Then open http://localhost:3000 in a browser and the application should be running.
I used the free Tailwind CSS template by https://www.tailwindtoolbox.com/templates/nordic-store

Alt Text

Project Structure:

  • components
    a) common : About.js, Footer.js, Hearder.js
    b) dashboard : Main.js, MainPage.js

  • NotFound.js: renders when the path from router doesn't match anything we expect to

  • Page.js: a "higher order"/parent component for all the other components except NotFound.js Here you can declare the strucutre of any page and create functions that are needed by all. Pass them down to child components using props.

  • Router.js: declare URL paths and associated components

  • img: images used in the application

  • config: i18n.js, options.js: configuration for internationalization. Goes hand in hand with folder /locales where all the translations are described

  • locales: home for all translations. Add here more languages or delete some

  • styles:
    a) index.css: imported all tailwind dependencies
    b) tailwind.css: generated taiwind css

  • index.js: entry point of the application

  • tailwind.js: here you can keep/add/delete whatever you want to customise the entire application. Read more here: https://tailwindcss.com/docs/container

  • postcss.config.js: Tailwind is added to the project as a Postcss plugin. This and autoprefixer are added to this config file.

Code can be found here: https://github.com/gabrielaradu/reactjstailwindcsstemplate

You can download or fork this project in order to save time in your development. Happy Coding.

πŸ’– πŸ’ͺ πŸ™… 🚩
gabriela
Gabi

Posted on February 13, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related