twitter ui practise Download - twitter ui practise Source Code Téléchargement

twitter ui practise

Code Source AI

1.0.0

Télécharger

Clone de pratique de l'interface utilisateur Twitter

L'objectif de ce projet est de se renseigner sur Next JS. Mon expérience est un concepteur de sites Web avec de l'expérience dans HTML et Tailwind CSS avec des connaissances JavaScript de base. J'ai fini par essayer de recréer l'interface utilisateur de la page d'accueil de l'application Twitter. C'est loin de l'original et je suis sûr qu'il y a beaucoup de défauts. Toutes les suggestions ou améliorations, veuillez me le faire savoir. L'essentiel est de s'amuser et d'apprendre quelque chose de nouveau, j'espère que vous le pouvez aussi.

Twitter-Demo.mp4.mp4

Commencer

Lorsque vous clonez le référentiel

npm install
npm run dev

Cacher le livre de contes pour voir les composants isolément

npm run storybook

Problèmes

Le panneau latéral de droite ne suit pas le même comportement que Twitter. Lorsque vous faites défiler, il colle mais vous devriez pouvoir voir les liens de pied de page.

Empiler

Next.js
CSS du vent arrière
Base
Livre de contes
Vercel

Ressources

Les gens que j'ai suivis et vérifié leurs référentiels et vidéos pour construire le clone.

Tru narla
Colby Fayock
Steven Tey
Lee Rob
Florentin

Qu'est-ce que c'est?

Si vous vérifiez le package.json, laissez-moi essayer d'expliquer quelques-uns

Class-Variance-Authority: vous permet de créer des variantes pour des choses comme les boutons. Si vous êtes concepteur, c'est comme les variantes de composants de Figma.
ClassNames: Si vous stylisez un composant tel que les composants de l'interface utilisateur Radix, vous pouvez avoir une longue gamme de classes utilitaires CSS lorsque vous utilisez CSS Tailwind. Vous pourriez avoir plané, animation, réactif, mise en page et d'autres classes. Vous pouvez maintenant les regrouper sur des lignes séparées.