Giter VIP home page Giter VIP logo

pernillasterner / technigo-project-music-releases-vite-2023 Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 1.37 MB

A React app template to display albums. Features include a structured component hierarchy, design fidelity, hover effects, and responsive layouts. Clicking on albums or artists links to external URLs. Components provided; focus on data flow and UI interactions.

HTML 2.75% JavaScript 48.98% CSS 48.27%

technigo-project-music-releases-vite-2023's Introduction

Music Releases

A web app to display albums, singles and latest playlists from Spotify. There was a specific design to be achived for the albumn component, which is linked in the instruction at the end of this file.

Developers: Pernilla Sterner, Sebastian Tigerschiöld (seti108)

Getting Started with the Project

Dependency Installation & Startup Development Server

Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies.

The command below is a combination of installing dependencies, opening up the project on VS Code and it will run a development server on your terminal.

npm i && code . && npm run dev

The Problem

Planning and pair programming

We started by looking at all the specific problems to solve in this weeks assignment. Once we did that, we split the problems into smaller tasks. Then we started out pair programming to get the data from the json-object as well as building our first React Component. We had a few challenges in this stage of development, like:

  • Finding the right folder structure for the project, like diving the files into folders, componentes and child-components
  • Understanding how to use React Properties and how they are inherited from parent to children.
  • How to pass json-data into different components, like to a child component
  • Understanding the syntax in React/JSX for returning JSX from the component

Execution in branches

Once we got a grip on the above mentioned things, we went ahead and divided the tasks between us, working in branches.

We had a deadline for the project and on that day, we did pair programming to test the site and fix bugs and details.

Some possible impreovements

If we were to spend more time on the project, we would probably try to structure the files in the project in a different way. Maybe into parent components in a separate folder, with all it's child components in the same folder as the parent.

Further we would implement Sass to get a cleaner CSS code and to be able to style the applications more efficiently with less conflicts.

View it live

Music Release App

Instructions

See instructions of this project

technigo-project-music-releases-vite-2023's People

Contributors

pernillasterner avatar

Stargazers

Chikita Isaac  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.