Docker is a tool designed to make it easier to create, deploy, and run applications by using containers. Containers allow developers to package up an application with all of the parts it needs, such as libraries and other dependencies, and ship it all out as one package.
To install Docker, you can follow the instructions on the Docker's official website:
This project requires Node.js to run. It's recommended to install Node.js using NVM (Node Version Manager) which allows you to easily install, update and switch between different Node.js versions.
To install NVM, follow the instructions on the NVM GitHub page.
Once NVM is installed, you can install Node.js. This project uses Node.js version 16.15.0. To install this version and use it, run the following commands:
nvm install 16.15.0
nvm use 16.15.0
MongoDB Compass is a GUI for MongoDB. It allows you to visually explore your data, run ad hoc queries, interact with your data with full CRUD functionality, view and optimize your query performance, and more.
To install MongoDB Compass, follow the instructions on the MongoDB Compass documentation.
This project uses environment variables for configuration. These variables are loaded from a .env file in the project root.
You can create a .env file by copying the provided .env.example file:
cp .env.example .env
This project is configured to run in a Docker container. To start the application, use Docker Compose:
docker-compose up
This will start the application and MongoDB in separate containers. The application will be available at http://localhost:3000, and MongoDB at mongodb://root:root@mongo:27017, just copy this url in mongodb compass to connect to the mongodb server.
Remember to stop the containers when you're done:
docker-compose down
The containers' data will be persisted in Docker volumes. To remove the data, you can remove the volumes:
docker volume rm codev-feedback-system_mongodbdata
# Identify changes you want to commit
git add .
# Husky will trigger, select appropriate choices for commit message and after finalizing commit message, upon arriving to vim just type :wq and enter to save
git commit
# Push changes to remote branch if changes has been finalized
git push origin branch-name
Name | Description |
---|---|
src/components/* | All app wise common components |
src/config/* | Any app level environment configs should go here. |
src/constants/* | Common constant values |
src/generators/* | Plop generator templates |
src/hooks/* | Custom react hooks |
src/redux/* | Redux store that stores all global state of the app |
src/pages/* | App pages |
src/styles/* | Common/Global styles |
src/utils/* | Utility functions |
.comminlintrc.json | Commit lint configuration |
.editorconfig | Editor configuration |
.eslintrc.js | Eslint configuration |
.env.example | Project environment variables |
.eslintignore | Folder and files ignored by eslint |
.gitignore | Folder and files ignored by git. |
.prettierignore | Folder and files ignored by prettier. |
.prettierrc | Prettier configuration |
.jest.config.js | Jest configuration |
.jest.setup.js | Jest setup |
app.json | App configurations by expo |
App.tsx | Entry point for the applicatinon |
next.config.js | Next.js configuration |
plopfile.js | Plop implementation |
postcss.config.js | PostCSS config |
tailwind.config.js | Tailwind config |
package.json | NPM dependencies. |
tsconfig.json | Contains typescript configuration for this project. |
# Opens storybook
yarn storybook
This project contains a .env.example
file that you can use. Rename it to .env
and modify the contents to your needs.
Run yarn plop
to generate a new component and select a location on where to store the generated story.
Check the components
folder if you have neccessary components needed to finish your screen. If not, you can define the component in the screen itself or add any components here if you think it is reusable between screens.
src/components
. The name should be able to give others the idea what the component is about.index.tsx
under that folder. This file will define the component itself.The screen defines a collection of components. You can define some components here if you think it is only usable within the screen but preferrably components should be resuable. Any logic, API request, or retrieving from redux store should be defined here.
src/pages
. Make sure the name is concise enough to understand what the component is about.index.tsx
. This file will define the page itself.Use camelCase
for files and folders that are not components or pages and camelCase
for variables within files. The only exception would be the component and pages names which should be PascalCase
.
// File name is Button.tsx
const Button: React.FC = () => {
const propName = 'Sample'
return <EditProfile name={propName} />;
};
In some cases, we include the file functionality
in its file name in the format:
<file-name>-<functionality>.<extension>
<file-name><functionality>.<extension>
Non-component/screen file/folder naming example:
Pages/component file/folder naming example:
yarn test .
yarn test componentName