Merge pull request #26 from hhimanshu/hhimanshu/dev-24-readme

feat(DEV-24): update README.md

README.md

@@ -1,13 +1,7 @@
-### What it contains
-- ReactJS support with TypeScript
-- Testing support using Jest and React Testing Library
-- Formatting support using Prettier
-- ESLint support
-- Ability to collect code coverage via Jest
-- Support for Storybook
-- CI setup using GitHub Actions
-
-### Commands
+# React TypeScript Starter
+Read more about why and list of all supported features [here](https://react-ts-starter-hhimanshu.vercel.app/)
+
+## Commands
 - `./setup.sh` to install dependencies.
 - `yarn start` to develop locally.
 - `yarn test` to test and see the code coverage.
@@ -18,3 +12,25 @@
 - `yarn storybook` to start storybook in development mode.
 - `yarn build-storybook` to create production build for storybook.
 - `yarn start-prod-storybook` to serve production build for storybook on port `5858`.
+
+## 3rd party setup
+If you are planning to leverage the ecosystem as available in this repository, you need to setup your project to use
+Vercel, Semantic Release and Renovate.
+
+All these tools are easy to configure. Please find their documentation below
+
+[Vercel - Deploy a project](https://vercel.com/docs#deploy-an-existing-project)
+
+[Semantic Release - Setup](https://semantic-release.gitbook.io/semantic-release/usage/getting-started)
+
+[Renovate Github App Installation](https://docs.renovatebot.com/install-github-app/)
+
+## How tos
+### How to import and use `SVG`?
+```tsx
+import Check from '../../../assets/check.svg'; // import
+<Check /> // use
+```
+
+## Questions or Ideas?
+Please [start a new discussion](https://github.com/hhimanshu/create-react-ts-starter/discussions) 

src/components/Home/Discussion/index.tsx

@@ -9,7 +9,7 @@ export const Discussion = () => {
     );
 
   return (
-    <Section title={'Have ideas?'} bgColor={'#F9F8F8'}>
+    <Section title={'Have ideas?'}>
       <Button title={'Start a discussion'} onClick={openDiscussion} />
     </Section>
   );

src/components/Home/GetStarted/index.tsx

@@ -7,7 +7,7 @@ export const GetStarted = () => {
     window.open('https://github.com/hhimanshu/create-react-ts-starter#readme');
 
   return (
-    <Section title={'Ready to get started?'}>
+    <Section title={'Ready to get started?'} bgColor={'#F9F8F8'}>
       <Button title={'Follow README.md'} onClick={openReadMe} />
     </Section>
   );

src/components/Home/NotIncluded/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Section } from '../Section';
+
+export const NotIncluded = () => {
+  return (
+    <Section title={'Why no redux or CSS Framework included?'}>
+      <p>
+        When it comes to client state management or using a styling solution,
+        there are a lot of options available. Additionally, each team or
+        individual have their favorites tools or needs for the problem at hand.
+      </p>
+      <p>
+        This project does not assume or provides any opinion on those choices,
+        so you are free to bring your own solution!
+      </p>
+    </Section>
+  );
+};

src/components/Home/index.tsx

@@ -5,13 +5,15 @@ import { Why } from './Why';
 import { Features } from './Features';
 import { GetStarted } from './GetStarted';
 import { Discussion } from './Discussion';
+import { NotIncluded } from './NotIncluded';
 
 export const Home = () => {
   return (
     <Fragment>
       <Header />
       <Why />
       <Features />
+      <NotIncluded />
       <GetStarted />
       <Discussion />
     </Fragment>