joaobispo2077/dropbox-clone

A responsive Dropbox Homepage Clone built with React.js, TypeScript and Styled components.

Dropbox | UI Clone (homepage)

A magic header and smooth sidebar

Project   |    Technologies   |    Layout   |    Challenges   |    How to contribute

💻 Project

The Dropbox Clone is a project that I learned how to use exotic css properties and practice make a minimal responsive homepage with a smooth sidebar.

🚀 Technologies

The project is based on the following technologies:

• ✨ TypeScript — Static typing for JavaScript.

• ⚛ React — A JavaScript library for building user interfaces.

• 💅 Styled Components — A toolkit for writing CSS-in-JS components.

• 📝 Lint — ESlint/Prettier/Editor Config

  • 📦 ESLint — A fully pluggable tool for identifying and reporting on patterns in JavaScript.
  • 📦 Prettier — A tool to keep code style consistent.
  • 📦 Editor Config — A tool to maintain consistent coding styles between different editors and IDEs.

• 🧲 Lint no commit — Husky/Lint-staged

  • 🐶 Husky — A tool to help you manage your git hooks.
  • 📦 Lint staged — A tool to help you manage your staged files.

🔖 Layout

• Comming soon...

🎯 Challenges

• ✅ - Add responsive sidebar.
• ✅ - Develop a magic header.
• ✅ - Understand css clip property.
• ✅ - Comunicate sidebar state with the main content.
• ✅ - Animate sidebar with smooth transitions.

♻️ How to contribute

• Fork this repository;
• Create a new branch with your feature: git checkout -b feature/my-feature;
• Commit your changes: git commit -m 'feat: awesome feature';
• Push to your branch: git push origin feature/my-feature.

Once your pull request has been merged, you can delete your branch.

To setup app, read this file setup.md

---

Made with 💙 & ☕ by João Bispo😎