DEV Community


Posted on • Updated on


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

Alt Text

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:

About this project:

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

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

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:

  • 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:

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

Top comments (4)

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

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

hvojha profile image
Harshvardhan Ojha

Are you also planning to create templates for python frameworks?

gabriela profile image

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?

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

⭐️🎀 JavaScript Visualized: Promises & Async/Await

async await