Skip to content

kaplanh/Tour-Places

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

21 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Tour Places

πŸ‘‰ Click here to see on browser

tour places


What's used in this app ? How use third party libraries Author
React - component Take a look at my portfolio
React - props Visit me on Linkedin
React - sass npm i sass or yarn add sass:1
Deploy with GitHub Pages

How To Run This Project πŸš€


πŸ’» Install React πŸ‘‡

yarn create react-app .  or npx create-react-app .

πŸ’» Install Sass πŸ‘‡

yarn add sass  or npm i sass

πŸ”΄ Delete these files and delete the importsπŸ‘‡

- App.test.js
- reportWebVitals.js
- setupTests.js
- favicon.ico
- logo192.png
- logo512.png
- manifest.json
- robots.txt

πŸ’» Start the project πŸ‘‡

yarn start or npm start

OR

  • Clone the Repo

    git clone
  • Install NPM packages

    npm install or yarn 
  • Run the project

    npm start or yarn start
  • Open the project on your browser

    http://localhost:3000/
  • Enjoy! πŸŽ‰


Project Skeleton

Horoscope App(folder)
|
|----public (folder)
β”‚     └── index.html
|----src (folder)
|    |--- components (folder)
|    |       |── header(folder)
β”‚    β”‚       |     β”œβ”€β”€ Header.jsx
β”‚    β”‚       |     β”œβ”€β”€ Header.scss
β”‚    β”‚       |     β”œβ”€β”€ Header.css
β”‚    β”‚       |
|    |       |── main(folder)
β”‚    β”‚       |     β”œβ”€β”€ Main.jsx
β”‚    β”‚       |     β”œβ”€β”€ Main.scss
β”‚    β”‚       |     β”œβ”€β”€ Main.css
β”‚    β”‚       |     β”œβ”€β”€ Card.jsx
β”‚    β”‚       |
|    |       |── navbar(folder)
β”‚    β”‚             β”œβ”€β”€ Navbar.jsx
β”‚    β”‚             β”œβ”€β”€ Navbar.scss
β”‚    β”‚             β”œβ”€β”€ Navbar.css
β”‚    β”‚
|    |--- helper (folder)
|    |       |── data.js
β”‚    β”‚       |── logo.png
β”‚    β”‚                      
β”‚    |--- scss (folder)
|    |      β”œβ”€β”€ _reset.scss
|    |      β”œβ”€β”€ _mixins.scss
|    |      β”œβ”€β”€ _variables.scss
|    |      
|    |       
β”‚    β”œ--- App.js
β”‚    β”œ--- App.scss
β”‚    β”œ--- App.css
β”‚    β”‚--- data.js
β”‚    β””--- index.js
β”‚
β”‚
|--- .gitignore
|── package-lock.json
β”œβ”€β”€ package.json
|── README.md
|── yarn.lock


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

  • sass with react

     // src/scss/_reset.scss
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
    
     // src/scss/_variables.scss
         //? Colors
       $backgroundColor:#ace0f9;
       $cardNavBgColor: #171b20;
    
     // src/scss/_mixins.scss
      @mixin media-xsm {
      @media screen and (min-width: 0px) {
        @content;
      }
    }
    
    
    @mixin media-sm {
      @media screen and (min-width: 576px) {
        @content;
      }
    }
    
    
    
    
     // src/scss/app.scss
    
    @import './scss/reset', './scss/variables';
    
        @import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap');
        
        @import url('https://fonts.googleapis.com/css2?family=Hubballi&display=swap');
        
        body{
            background-color: $backgroundColor;
            font-family: 'Amatic SC', cursive;
        }
        
        p{
            font-family: 'Hubballi', cursive;
        }
    
  • Parent Component icinde json datayi map() leme

    // src/components/main/Main.jsx Parent component
    
          import { data } from "../../helpers/data";
         import "./Main.scss";
         import Card from "./Card";
         const Main = () => {
             // console.log(data);
             return (
                 <div className="card-container">
                     {data.map((item, i) => (
                         // !props
                         // ?asagi data gΓΆndermenin 1.yolu
                         // <Card item={item} />
                         // bΓΆyle gΓΆnderirsek diger tarafta props.item.title seklinde yakalamaliyim
                         // ?asagi data gΓΆndermenin 2.yolu
                         <Card key={item.id} {...item} />
                         
                     ))}
                 </div>
             );
         };
         export default Main;
    
    
    
    // src/components/main/Card.jsx Child component
    
        const Card = (data) => {
     // console.log("ne geliyo", data);
     const { id, title, image, desc } = data;
     return (
         <div key={id} className="cards">
             <div className="title">
                 <h1>{title}</h1>
             </div>
             <img src={image} alt="" />
    
             <div className="card-over">
                 <p>{desc}</p>
             </div>
         </div>
     );
    };
    
    export default Card;

  • Deploy with GitHub Pages

  • πŸ’» write in Terminal πŸ‘‡

// src
 npm i gh-pages or yarn add gh-pages
  • πŸ’» add this in scripts: "predeploy": "yarn run build", "deploy": "gh-pages -d build" // if you use npm: "predeploy": "npm run build","deploy": "gh-pages -d build" πŸ‘‡

// src/package.json

"scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject",
      "predeploy": "yarn run build", 
      "deploy": "gh-pages -d build"
  },

πŸ’» add github.io link as homepage: "homepage": "https://kaplanh.github.io/horoscope_app", πŸ‘‡

// src/package.json
{
    "homepage": "https://kaplanh.github.io/horoscope_app",
    "name": "horoscope_app",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "gh-pages": "^6.1.1",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "sass": "^1.70.0"
    },
  • πŸ’» write in Terminal πŸ‘‡

  yarn run deploy  or npm run deploy
  • πŸ’» visit your page link πŸ‘‡

https://kaplanh.github.io/horoscope_app
  • Image ΓΌzerine geldiginde alttan yukari dogru scrolsΓΌz metin kaydirma

     const Card = ({ title, date, image, desc }) => {
      // const { title, date, image, desc } = props;
      // console.log("ne geliyor", props);
      return (
          <div className="cards">
              <div className="title">
                  <h1>{title}</h1>
              </div>
              <div className="date">
                  <h2>{date}</h2>
              </div>
              <img src={image} alt="" />
              <div className="card-over">
                  <p>{desc}</p>
              </div>
          </div>
      );
    };
    
      .cards {
              width: 500px;
              height: 350px;
              position: relative;
              overflow: hidden;        
              &:hover .card-over {
                  transform: translate(0%);
              }
              &:hover img {
                  opacity: 1;
              }
    
          .card-over {
              width: 500px;        
              position: absolute;
              bottom: 0;
              left: 0;
              background-color: rgba(0, 0, 0, 0.8);
              font-size: 1.5rem;
              z-index: 3;
              padding: 1rem;
              transform: translateY(100%);
              transition: transform 0.7s;
              max-height: 75%;
              overflow: auto;
              // ?scrollbari kaybetmek icin
              &::-webkit-scrollbar{
                  display: none;
                               }  
                 }
        }

Feedback and Collaboration

I value your feedback and suggestions. If you have any comments, questions, or ideas for improvement regarding this project or any of my other projects, please don't hesitate to reach out. I'm always open to collaboration and welcome the opportunity to work on exciting projects together. Thank you for visiting my project. I hope you have a wonderful experience exploring it, and I look forward to connecting with you soon!

βŒ› Happy Coding ✍

Footnotes

    • App.js de bu sekilde import edilmeli import './App.scss';
    ↩