Demo: Storybook:

---

Rick and Morty

Project built using current frontend stack.

🕹 Demo

Check out the demo and storybook!

🔬 Tech stack

Application:

• TypeScript
• Vite
• React
• GraphQL
  • Apollo
  • GraphQL Codegen
• Styled Components
• Storybook

Code quality tools:

• Husky
• Prettier
• ESLint
• Lint Staged
• Commit Lint
• Commitizen

🛠 Development

1. Install dependencies:

   npm install

2. Run dev server:

   npm run dev

🦮 Suggested development workflow

1. Run dev server:

   npm run dev

2. Run Storybook server:

   npm run storybook

3. Create and checkout a branch, e.g.:

   git checkout -b ui/redesign-navigation

4. Make desired changes

5. Add files to Git staging:

   git add .

6. Commit your changes as often as you need, e.g.:

   git commit -m "feat: change navigation button size"

   NOTICE: The project uses Commit Lint that checks if the commit message is properly formatted.

   You may also use the following command to run Commitizen wizard:

   npm run commit

7. Push changes:

   git push -u origin/ui/redesign-navigation

8. Create pull request on GitHub.

9. If everything is ok - merge changes.

🚀 Build and deploy

1. Build the application:

   npm run build

2. Deploy /dist directory contents wherever you want.

   NOTICE: since the application uses React Router, make sure you redirect every path to /index.html on the server.

📚 Build and deploy Storybook

1. Build the Storybook:

   npm run build-storybook

2. Deploy /storybook-static directory contents wherever you want.

🗺 Roadmap

• Add logo
• Add image placeholder
• Add transitions between routes
• Add filter functionality
• Add /locations path
• Add /episodes path
• Organize files by features (eg. characters, locations, episodes)
• Improve accessibility
• Improve GraphQL caching

🙌 Contribution

If you have any remarks, don't hesitate to create an issue.