8 projets d'apprentissage

«Le maître fait plus d'erreurs qu'un débutant — Tentatives»

Nous proposons 8 projets amusants à réaliser pour acquérir une expérience de développement concrète.

Projet 1. Clone de Trello

Clone de Trello par Indrek Lasn .

Ce que vous apprendrez :

• Organisation des routes de traitement des requêtes (Routing).
• Glisser-déposer.
• Comment créer de nouveaux objets (tableaux, listes, cartes).
• Traitement et validation des données d'entrée.
• Du côté client : comment utiliser le stockage local, comment sauvegarder des données dans le stockage local, comment lire des données à partir du stockage local.
• Du côté serveur : comment utiliser des bases de données, comment sauvegarder des données dans la base, comment lire des données à partir de la base.

Voici un exemple de dépôt, fait avec React+Redux.

Projet 2. Panneau d'administration

GitHub Repository.

Une simple application CRUD, idéale pour apprendre les bases. Nous apprendrons :

• Créer des utilisateurs, gérer des utilisateurs.
• Interagir avec la base de données — créer, lire, modifier, supprimer des utilisateurs.
• Validation des entrées et gestion des formulaires.

Projet 3. Suivi des cryptomonnaies (application mobile native)

Dépôt GitHub.

En utilisant n'importe quoi : Swift, Objective-C, React Native, Java, Kotlin.

Nous allons apprendre :

• Comment fonctionnent les applications natives.
• Comment extraire des données d'une API.
• Comment fonctionnent les mises en page des pages natives.
• Comment travailler avec des simulateurs mobiles.

Essayez cette API. Si vous trouvez mieux — écrivez-le dans les commentaires.

Si ça vous intéresse, voici un tutoriel ici.

Projet 4. Configurer votre propre config webpack à partir de zéro

Techniquement, ce n'est pas une application, mais c'est une tâche très utile pour comprendre comment fonctionne webpack de l'intérieur. Cela ne sera plus une «boîte noire», mais un outil compréhensible.

Exigences :

• Compiler es7 en es5 (bases).
• Compiler jsx en js  — ou  -  .vue en .js (vous devrez apprendre les chargeurs)
• Configurer le serveur de développement webpack et le rechargement à chaud des modules. (vue-cli et create-react-app utilisent les deux)
• Utiliser Heroku, now.sh ou GitHub, apprendre à déployer des projets webpack.
• Configurer votre préprocesseur préféré pour compiler css  —  scss, less, stylus.
• Apprendre à utiliser des images et des svgs avec webpack.

Voici une ressource incroyable pour les débutants complets.

Projet 5. Clone de Hackernews

Chaque Jedi doit créer son propre Hackernews.

Ce que vous apprendrez en cours de route :

• Comment interagir avec l'API hackernews.
• Comment créer une application monopage.
• Comment implémenter des fonctionnalités telles que la visualisation des commentaires, des commentaires individuels, des profils.
• Organisation des routes de traitement des requêtes (Routing).

Projet 6. Todo

TodoMVC.

Sérieusement ? Todo ? Il y en a des milliers. Mais croyez-moi, il y a une raison à une telle popularité.
Une application Todo est un excellent moyen de s'assurer que vous comprenez les bases. Essayez d'écrire une application en JavaScript pur et une autre avec votre framework préféré.

Apprenez à :

• Créer de nouvelles tâches.
• Vérifier le remplissage des champs.
• Filtrer les tâches (terminées, actives, toutes). Utilisez filter et reduce.
• Comprendre les bases de JavaScript.

Projet 7. Liste triable par drag and drop

Dépôt GitHub.

Très utile pour comprendre l'API drag and drop..

Nous apprendrons :

• l'API drag and drop
• Créer des interfaces utilisateur riches.

Projet 8. Clone d'une messagerie (application native)

Vous comprendrez comment fonctionnent les applications web et les applications natives, ce qui vous distinguera de la masse.

Ce que nous allons étudier :

• Web sockets (messages instantanés)
• Comment fonctionnent les applications natives.
• Comment les templates fonctionnent dans les applications natives.
• Organisation des routes de traitement des requêtes dans les applications natives.

Cela vous suffira pour un mois ou deux.

La traduction a été réalisée avec le soutien de l'entreprise EDISON Software, qui se spécialise dans le développement d'applications et de sites web en PHP pour de grands clients, ainsi que le développement de services cloud et d'applications mobiles en Java..

Source : habr.com