Project: Frameworks

Introduction

The best way to actually learn something is to use it! We’ve directed you to basic tutorials and introductory material for each of the 3 biggest frameworks right now. For this assignment you need to select one of these frameworks and complete a simple project. A deep-dive into any of these frameworks will be up to you, but at this point you should have a good enough foundation to find your own way.

Assignment

  1. Select one of the big 3 frameworks.
  2. For this assignment you’ll be recreating one of our previous assignments using your framework of choice.. so look back at your previous work and select a project. I’d suggest either the library or the restaurant page. If you want to do the todo-list I’d suggest just doing a simplified version without projects.
  3. The actual implementation is up to you, but before you start consider which elements in your project are going to be their own components. Having a general idea of how your app is going to be organized is a great way to get started. This article while being about react is relevant for any of these frameworks. Read that and notice how they break the UI down into components.
  4. Build it baby! Good luck!

Student Solutions

Submit a solution with a pull request to this file on the Javascript Curriculum github repository. See the section on Contributing for how.

Show Student Solutions – Add your solution below this line! (Be sure to specify which framework and project you’ve completed!) * [miknick’s React Library](https://github.com/miknick/React-Library-Page) – [View in Browser](https://miknick.github.io/React-Library-Page/) * [Salvador Villalon’s Vue Restaurant Page](https://github.com/salvillalon45/theOdinProject-Frameworks) – [View in Browser](https://salvillalon45.github.io/theOdinProject-Frameworks/) * [Diane998’s Angular Library](https://github.com/Diane998/library) – [View in Browser](https://angular-library-git-master.diane998.vercel.app/) * [Scott’s React Restaurant Page](https://github.com/ScotttP/restaurant-page-react/tree/master/restaurant-page) – [View in Browser](https://scotttp.github.io/restaurant-page-react/) * [Rizwan’s React Library](https://github.com/xRizwan/react-library) – [View in Browser](https://xrizwan.github.io/react-library/) * [nearmint’s Vue.js Library](https://github.com/nearmint/vue-library) – [View in Browser](http://nearmint.github.io/vue-library) * [ray0h’s React ToDo App](https://github.com/ray0h/ToDoApp-React) – [View in Browser](http://ray0h.github.io/ToDoApp-React) * [Joshua’s React Library](https://github.com/joshua-a-jones/react_library_app/) – [View in Browser](https://joshua-a-jones.github.io/react_library_app/) * [Kevin’s React Library](https://github.com/Kevlar2222/library) – [View in Browser](https://Kevlar2222.github.io/library/) * [ergunirem’s React Library](https://github.com/ergunirem/react-library) – [View in Browser](https://ergunirem.github.io/react-library/) * [kaliberpoziomka’s React Todo List](https://github.com/kaliberpoziomka/todolist-react) – [View in Browser](https://kaliberpoziomka.github.io/todolist-react/) * [vonhoro’s React Library](https://github.com/vonhoro/Restaurant-with-React) – [View in Browser](https://vonhoro.github.io/Restaurant-with-React/) * [Ideopunk’s React Library](https://github.com/Ideopunk/react-library) – [View in Browser](https://ideopunk.github.io/react-library/) * [Lucio’s React Todo List](https://github.com/JCarlosLucio/react-todo-list) – [View in Browser](https://jcarloslucio.github.io/react-todo-list/) * [Zayeer’s React Todoo](https://github.com/Zayeer/todoos/tree/master) – [View in Browser](https://zayeer.github.io/todoos/) * [guyroberts21’s React Library](https://github.com/guyroberts21/react-library) – [View in Browser](https://guyroberts21.github.io/react-library/) * [Juan Oxmar’s Library w/ React](https://github.com/juanoxmar/reactLibrary) – [View in Browser](https://juanoxmar.github.io/reactLibrary/) * [Carl D’Oleo-Lundgren’s Vue Library](https://github.com/carldoleolundgren/library-vue) – [View in Browser](https://carldoleolundgren.github.io/library-vue/) * [Sher’s React Restaurant](https://github.com/sher-s7/react-restaurant-page) – [View in Browser](https://sher-s7.github.io/react-restaurant-page/) * [Andrija’s Solution](https://github.com/Amdrija/todo-list-app) – [View in Browser](https://amdrija.github.io/todo-list-app/) * [Korak’s Solution](https://github.com/Korak-997/todo-Vue-App/tree/source-code) – [View in Browser](https://happy-raman-a16efe.netlify.app/) * [Andres Ruiz’s Vue Library](https://github.com/Andrsrz/library-vuejs) – [View in Browser](https://andrsrz.github.io/library-vuejs/) * [Odunsi’s(dhatguy) React Library](https://github.com/dhatGuy/library/tree/react-library) – [View in Browser](https://rebrand.ly/e5509) * [hieu-ng’s Vue Todo List](https://github.com/hieu-ng/vue-simple-todolist) – [View in Browser](https://hieu-ng.github.io/vue-simple-todolist/) * [Luky’s React Library](https://github.com/lcyne/book-list/) – [View in browser](https://lcyne.github.io/book-list/) * [Ylli’s React Library](https://github.com/yllabazi/myLibrary-ReactJS) – [View in Browser](https://yllabazi.github.io/myLibrary-ReactJS/) * [Andrey’s React To-Do list solution](https://andreyskopintsev.github.io/react-todo) * [Jdonahue135’s React Library solution](https://github.com/jdonahue135/react-library) * [mjwills-inf’s Vue Library solution](https://github.com/mjwills-inf/-TOP-library-vue) – [View in Browser](https://mjwills-inf.github.io/-TOP-library-vue/#/) * [Lenny’s React solution](https://github.com/Lenn-e/react-practice) – [View in Browser](https://lenn-e.github.io/react-practice/) * [Disco Trooper’s Vue solution](https://github.com/disco-trooper/library-vue) – [View in Browser](https://disco-trooper.github.io/library-vue/) * [Edd Sansome’s React solution](https://github.com/casualc0der/burger-bar-react) – [View in Browser](https://casualc0der.github.io/burger-bar-react/) * [Simon Fraipont’s React library solution](https://github.com/Sim-frpt/react-library) – [View in Browser](https://sim-frpt.github.io/react-library/) * [James’s React Library Solution](https://github.com/ericksen-github/library_react) – [View in Browser](https://ericksen-github.github.io/library_react/) * [clavierbulb-green’s React Library Solution](https://github.com/clavierbulb-green/React-Library) – [View in Browser](https://clavierbulb-green.github.io/React-Library/) * [Kevin Vuong’s React Library Solution](https://github.com/fffear/react-lib) – [View in Browser](https://fffear.github.io/react-lib/) * [Braxton Lemmon’s React Library Solution](https://github.com/braxtonlemmon/book-library-react) – [View in Browser](https://braxtonlemmon.github.io/book-library-react/) * [Zakariye Yusuf’s React ToDoList Solution](https://github.com/ZYusuf10/timelyRe) – [View in Browser](https://zyusuf10.github.io/timelyRe/) * [Bollinca’s React Library Solution](https://github.com/bollinca/library-react-version) – [View in Browser](https://bollinca.github.io/library-react-version/) * [Brendaneus’ React Library Solution](https://github.com/Brendaneus/the_odin_project/tree/master/javascript/react-library) – [View in Browser](https://theodinprojects.live/courses/javascript/projects/react-library) * [Martink-rsa’s React ToDoList Solution](https://github.com/martink-rsa/ToDoList_React_MUI) – [View in Browser](https://todolist-martink-rsa.netlify.com/) * [Elias White’s Angular Library Solution](https://github.com/elias-white/AngularLibrary) – [View in Browser](https://elias-white.github.io/AngularLibrary/) * [Igorashs’s Vue Solution](https://github.com/igorashs/vue-todo-list) – [View in Browser](https://igorashs.github.io/vue-todo-list/) * [Bojo’s React Solution](https://github.com/BojoZahariev/Restaurant_react) – [View in Browser](https://bojozahariev.github.io/Restaurant_react/) * [Vedat’s React Solution](https://github.com/mvedataydin/react-todo) – [View in Browser](https://mvedataydin.github.io/react-todo/) * [Solodov’s Vue Solution](https://github.com/solodov-dev/todo-vue) – [View in Browser](https://solodov-dev.github.io/todo-vue/) * [Eljoey’s React TodoList Solution](https://github.com/eljoey/React-todo-2) – [View in Browser](https://eljoey.github.io/React-todo-2/) * [Henry Kirya’s Svelte Solution](https://github.com/harrika/library-svelte) – [View in Browser](https://harrika.github.io/library-svelte/) * [ARaut9’s React Library](https://github.com/ARaut9/book_library_react) – [View in Browser](https://araut9.github.io/book_library_react/) * [Jason McKee’s Vue Library](https://github.com/jttmckee/vue-library) – [View in Browser](https://jttmckee.github.io/vue-library/) * [Andrew’s Vue.js Solution](https://github.com/andrewr224/readersite) – [View in Browser](https://andrewr224.github.io/readersite/#/) * [autumnchris’s React Library Solution](https://github.com/autumnchris/reading-list-reactjs) – [View in Browser](https://autumnchris.github.io/reading-list-reactjs) * [nmac’s Solution](https://github.com/nmacawile/ng-to-do-list) – [Angular To-do List](https://ng-to-do-list-239a2.firebaseapp.com) * [Tamerlan1993’s Todo-list Solution](https://github.com/Tamerlan1993/hactktoberfest-2018/tree/master/vuex-todo-app) – [View in browser](https://vuex-todomvc-1.netlify.com/) * [Luján Fernaud’s React book-library Solution](https://github.com/lujanfernaud/react-reading-list) – [View in browser](http://lujanfernaud.com/react-reading-list/) * [Devon’s React todo-list Solution](https://github.com/defitjo/react-todo-app) * [Alexfuro’s React book-library Solution](https://github.com/alexfuro/odin-books-react) * [Katineto’s React todo-list Solution](https://github.com/Katineto/avocado) – [View in browser](https://katineto.github.io/avocado/) * [Caner Sezgin’s Solution](https://github.com/CanerSezgin/TodoList/tree/master/Source%20Codes) – [View in browser](https://canersezgin.github.io/TodoList/) * [Javier Machin’s Solution](https://github.com/Javier-Machin/react-simple-library) – [View in browser](https://javier-machin.github.io/react-simple-library/) * [Areeba’s Vue TodoList Solution](https://github.com/AREEBAISHTIAQ/Todolist) – [View in browser](https://areebaishtiaq.github.io/Todolist/) * [Taylor J’s React TodoList Solution](https://github.com/taylorjohannsen/react-todo) – [View in browser](https://taylorjohannsen.github.io/react-todo/) * [Halkim44’s React Library App Solution](https://github.com/halkim44/react-my-library/tree/master) – [View in browser](https://halkim44.github.io/react-my-library/) * [Tronerta’s Vue Todo-List Solution](https://github.com/Tronerta/vue-todolist) – [View in browser](https://morning-meadow-39929.herokuapp.com) * [Yash’s React Todo-List Solution](https://github.com/yashboura303/todoReact) * [Kai’s React Library Solution](https://github.com/KaiVandivier/library-react) – [View in Browser](https://kaivandivier.github.io/library-react/) * [Aron’s Solution (Restaurant Page)](https://github.com/aronfischer/react_restaurant_page) – [View in Browser](https://aronfischer.github.io/react_restaurant_page/) * [Emil Dimitrov’s React Page](https://github.com/edmtrv/game-page-react) – [View in Browser](https://edmtrv.github.io/game-page-react/) [React Library](https://github.com/edmtrv/game-library-react) – [View in Browser](https://edmtrv.github.io/game-library-react/) * [Edehlol’s React Library Solution](https://github.com/edehlol/react-library) – [View in Browser](https://edehlol.github.io/react-library/) * [Vorelli’s React Library Solution](https://github.com/Vorelli/Angular_Library) – [View in Browser](https://vorelli.github.io/Angular_Library) * [mmboyce’s React Restaurant Page Solution](https://github.com/mmboyce/restaurant-page-react) – [View in Browser](https://mmboyce.github.io/restaurant-page-react/) * [Mo’s React Todo App Solution](https://github.com/hamohuh/react-todo/tree/gh-pages) – [View in Browser](https://hamohuh.github.io/react-todo/) * [JoshAubrey’s Vue Restaurant Page Solution](https://github.com/JoshAubrey/vue-restaurant-page) – [View in Browser](https://joshaubrey.github.io/vue-restaurant-page/) * [0xtaf’s React Restaurant Page Solution](https://github.com/0xtaf/react-restaurant) – [View in Browser](https://0xtaf.github.io/react-restaurant/) * [barrysweeney’s React Rock Paper Scissors Solution](https://github.com/barrysweeney/react-rock-paper-scissors) – [View in Browser](https://barrysweeney.github.io/react-rock-paper-scissors/) * [ranmaru22’s Angular Library Solution](https://github.com/ranmaru22/ng-library) – [View in Browser](https://ranmaru22.github.io/ng-library/) * [thecodediver’s Solution](https://github.com/thecodediver/library_react) – [View in Browser](https://thecodediver.github.io/library_react/) * [Rey van den Berg’s Solution](https://github.com/Rey810/library-react) * [Joe Thompson’s Library Solution](https://github.com/jlthompso/library_react) – [View in Browser](https://jlthompso.github.io/library_react/) * [Ricardo’s React Library Solution](https://github.com/ricardo-gonzalez-villegas/library-react-app/tree/master) – [View in Browser](https://ricardo-gonzalez-villegas.github.io/library-react-app/) * [Ricardo’s React Restaurant Solution](https://github.com/ricardo-gonzalez-villegas/restaurant-react-app/tree/master) – [View in Browser](https://ricardo-gonzalez-villegas.github.io/restaurant-react-app/) * [Tim Kelly’s React Library Solution](https://github.com/timkellytk/project-react-library) – [View in Browser](https://timkellytk.github.io/project-react-library/) * [FortyPercentTitanium’s Todo List Solution](https://github.com/fortypercenttitanium/todoreact) – [View in Browser](https://fortypercenttitanium.github.io/todoreact/) * [Nijepa’s Vue ToDo List Solution](https://github.com/nijepa/todo-list-vue) – [View in Browser](https://nijepa.github.io/todo-list-vue/) * [jooji-san’s React Library Solution](https://github.com/jooji-san/library-react) – [View in Browser](https://jooji-san.github.io/library-react/) * [MatyD’s React Library Solution](https://github.com/MatyD356/remeked-lib/tree/master) – [View in Browser](https://matyd356.github.io/remeked-lib/) * [themetar’s React Library Solution](https://github.com/themetar/library-app-react) – [View in Browser](https://themetar.github.io/library-app-react/) * [Chandra’s React Tic Tac Toe Solution](https://github.com/CodeSurfer3022/Tic-Tac-Toe-React) – [View in Browser](https://codesurfer3022.github.io/Tic-Tac-Toe-React/) * [Chandra’s React Todo list Solutin](https://github.com/CodeSurfer3022/Todo-list-React) – [View in Browser](https://codesurfer3022.github.io/Todo-list-React/)