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

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

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.

Comments

[Alexander Kim]

1. Github link doesn't work;
2. If you're using react-router 4+, it's recommended to use declarative style.

[Gabi]

I forgot to make the repository public, thanks for telling me.

[Harshvardhan Ojha]

Are you also planning to create templates for python frameworks?

[Gabi]

I haven't thought about this. Would it be useful in any way? Using a framework like Django for instance? What do you think would be a nice base for a Python template project?