An open API service indexing awesome lists of open source software.

https://github.com/mehmet-github06/react-horoscope-solution

The project aims to create a horoscope application.
https://github.com/mehmet-github06/react-horoscope-solution

html-css-javascript mock-data react sass

Last synced: 6 months ago
JSON representation

The project aims to create a horoscope application.

Awesome Lists containing this project

README

          



Logo

# Project: Horoscope App

## Description

The project aims to create a horoscope application. Whichever zodiac sign you are, you can read their features by looking at the cards we created with React.
## Problem Statement

- We are adding a new project to our portfolios. So you and your colleagues have started to work on the project.

## Project Skeleton

```
001-Horoscope App(folder)
|
|----readme.md # Given to the students (Definition of the project)
SOLUTION
├── public
│ └── index.html
├── src
│ ├── components
│ │ ├── main
│ │ │ ├── Main.js
│ │ │ ├── Card.js
│ │ │ └── Main.scss
│ │ ├── header
│ │ │ ├── Header.scss
│ │ │ └── Header.js
│ │ └── navbar
│ │ ├── Navbar.scss
│ │ └── Navbar.js
│ ├── helper
│ │ └── data.js
│ ├── App.js
│ ├── App.scss
│ └── index.js

├── package.json
└── yarn.lock
```
## Expected Outcome

![lesson-reminder](./public/Animation.gif)

## Expected Outcome

https://horoscope-solution-app.netlify.app/

## Objective

Build a Horoscope App using ReactJS.

### At the end of the project, following topics are to be covered;

- HTML

- CSS-SCSS

- JS

- ReactJS

### At the end of the project, students will be able to;

- improve coding skills within HTML & CSS-SCSS & JS & ReactJS.

- use git commands (push, pull, commit, add etc.) and Github as Version Control System.

## Steps to Solution

- Step 1: Create React App using `npx create-react-app horoscope`

- Step 2: Build horoscope app using [`data.js`](./data.js).

- Step 4: Push your application into your own public repo on Github

- Step 5: Add project gif to your project and README.md file.

## Notes

- You can add additional functionalities to your app.

**

☺ Happy Coding ✍

**