This is a project based on the guidance provided by the client "Tasty Tv" in which different functionalities are implemented in a SPA for the user to experience adding and deleting titles to its watch later list
Live demo here Vercel https://csb-j82sy-g4os2grg9-lkm779.vercel.app/
- General Info
- Technologies Used
- Features
- Screenshots
- Setup
- Usage
- Project Status
- Challenges
- Room for Improvement
- Acknowledgements
- Contact
- This is a one week time project developed under the supervision of Alok and the guidance of the Clients brief documentation.
- What problem does it (intend to) solve? The main functionalities that the SPA wants to deliver to the user are based on the 4 main deliverables which are always focused from the Client perspective and to a greater extent with a final user approach: • Add a new item • Edit an item • Mark item as watched • Remove an item
- What is the purpose of your project? The purpose of the project is to build an SPA from scratch, with the help of specific technologies and the data taken from an already setted API, to deliver some specific features to a potential customer and meeting the client´s requirements.
- Code sandbox as the main online web development editor for the project.
- React as a base in the development of the UI and component as single-page-application
- JS open library and HTML incorporated in it. -Bootstrap for the design which contains CSS frameworks and JS
List of the ready features:
- Add movies to My Movies List
- Delete Movies from My Movies List
- Add wWatched feature to each of the movies
- Add Unwatch feature to each of the movies
Open your terminal and then type
$ git clone https://github.com/lkm779/project-2.git
This clones the repo
cd into the new folder and type
$ npm install
This installs the required dependencies
To run the React project. $ npm start
You are done!the React project in the new folder that's created.
How does one go about using it?
User-Story link: https://miro.com/app/board/o9J_lxcfQSE=/ Wireframe link: https://miro.com/app/board/o9J_lxcfQSE=/
-Planning: One of the main issues I had from the beginning was the planning in terms of implementing a solid wireframe and user-story to later on implement a high level component design and then from there move to the low level design apply all the functionalities -Restructuring: At the same time this issues contributed of failing to deliver one unique project and that´s one of the reasosn why i had to build several projects from scratch. -Passing the state: I also had several issues passing the states at different times of the project which difficulted me from delivering unwatch all and remove all deliverables, as these kept crashing the app I had to proceed to delete them.
Include areas you believe need improvement / could be improved. Also add TODOs for future development.
The main areas to be improved are • Design • Remove all items • Remove all watched items
And some Stretch Goals • Allow users to sign up, sign in, and sign out using Firebase
- This project was based on:
https://reactjs.org/docs/conditional-rendering.html https://www.digitalocean.com/community/tutorials/7-ways-to-implement-conditional-rendering-in-react-applications https://react-bootstrap.netlify.app/layout/grid/ https://www.creative-tim.com/blog/web-design/how-to-use-bootstrap-with-reactjs/ https://getbootstrap.com/docs/5.1/components/card/ https://reactjs.org/tutorial/tutorial.html https://www.youtube.com/watch?v=XtMThy8QKqU https://www.youtube.com/ And all the documentation available on Aula in addition to the prerecorded sessions.