Yog9/SnapShot使用 React Hooks、Context API 和 React Router 创建的 Gallery

鲁虺

廣告

[color=var(--color-accent-fg)]Yog9[color=var(--color-fg-muted)  !important]/[color=var(--color-accent-fg)]SnapShot[color=var(--color-fg-muted)]Public                                        About               

                SnapShot is Gallery created using React Hooks, Context API and React                 Router. The Routes were setup for four default pages and a search page.                 Also the images were displayed using the Flickr API and Axios to fetch                 data.

                                                                                                                                                                                                                                                                                SnapShot 是使用 React Hooks、Context API 和 React Router                                                         创建的 Gallery。路由设置为四个默认页面和一个搜索页面。还使用 Flickr API 和                                                         Axios 显示图像以获取数据。                                                                                                                                                                                                                               
                                       
                               
                       
               
                                                                       
                       
               
                                                                                        [color=var(--color-accent-fg)]yog9.github.io/snapshot/
                                Topics                                                                        [color=var(--color-accent-fg)][backcolor=var(--color-accent-subtle)]travis-ci [color=var(--color-accent-fg)][backcolor=var(--color-accent-subtle)]reactjs [color=var(--color-accent-fg)][backcolor=var(--color-accent-subtle)]axios [color=var(--color-accent-fg)][backcolor=var(--color-accent-subtle)]flickr-api [color=var(--color-accent-fg)][backcolor=var(--color-accent-subtle)]react-example [color=var(--color-accent-fg)][backcolor=var(--color-accent-subtle)]react-hooks
               
                                Resources                                        [color=var(--color-fg-muted)  !important]                         Readme
                                                Stars                                        [color=var(--color-fg-muted)  !important]                         255 stars
                                Watchers                                        [color=var(--color-fg-muted)  !important]                         13 watching
                                Forks                                        [color=var(--color-fg-muted)  !important]                         284 forks
       

                                        [color=var(--color-fg-default)  !important]Releases                [color=var(--color-fg-muted)  !important]                        No releases published
       

                                        [color=var(--color-fg-default)  !important]Packages                [color=var(--color-fg-muted)  !important]                        No packages published

       

                                        [color=var(--color-fg-default)  !important]Contributors

[color=var(--color-fg-default)][backcolor=var(--color-neutral-muted)]4

               

                       
•                         [color=var(--color-accent-fg)][color=var(--color-fg-default)  !important]Yog9 Yogita                         Verma
                         
•                         [color=var(--color-accent-fg)][color=var(--color-fg-default)  !important]traviscibot Travis                         CI
                         
•                         [color=var(--color-accent-fg)][color=var(--color-fg-default)  !important]veryamini Yamini                         Verma
                         
•                         [color=var(--color-accent-fg)][color=var(--color-fg-default)  !important]dependabot[bot]
                 

       

                                        [color=var(--color-fg-default)  !important]Environments

[color=var(--color-fg-default)][backcolor=var(--color-neutral-muted)]1

               

                       
•                          [color=var(--color-fg-default)  !important]github-pages[color=var(--color-success-fg)]Active
                 

       

                                        Languages                                        [backcolor=var(--color-neutral-muted)]                                                                                                                                               
               

                       
•                         [color=var(--color-fg-muted)  !important]                        [color=var(--color-fg-default)  !important]                        JavaScript72.6%
                         
•                         [color=var(--color-fg-muted)  !important]                        [color=var(--color-fg-default)  !important]                        CSS23.3%
                         
•                         [color=var(--color-fg-muted)  !important]                        [color=var(--color-fg-default)  !important]                        HTML4.1%
                 

       


                                        [color=var(--color-fg-default)  !important]README.md       

                        [color=var(--color-accent-fg)]Snap Shot [color=var(--color-accent-fg)]       

        [color=var(--color-accent-fg)] [color=var(--color-accent-fg)] [color=var(--color-accent-fg)]

       

        [color=var(--color-accent-fg)]Demo of Snap Shot

       

        [color=var(--color-accent-fg)]

                [color=var(--color-accent-fg)]Summary       

        Snap Shot is a gallery created using React,React Hooks, React Router and         Context API. The Routes were setup for four default pages and a search page.         Also the images were displayed using the Flickr API and axios to fetch data.

                [color=var(--color-accent-fg)]Motivation       

        The purpose of this project was to get familiar with React Hooks and Context         API.

                [color=var(--color-accent-fg)]Getting Started       

        Click the demo link or clone/download the repository on your local machine.         Create a config.js file in api folder inside src folders. In config.js file         write export         const apiKey = "YOUR_FLIKR_API_KEY";

                [color=var(--color-accent-fg)]Install dependencies       

                yarn install

                [color=var(--color-accent-fg)]Run Snap Shot from the root directory.       

                yarn start

                [color=var(--color-accent-fg)]Built With       

               
• React js
                 
• React Router
                 
• React Hooks
                 
• Context API
                 
• Flickr API
         

                [color=var(--color-accent-fg)]Features       

        1. Responsive         Design.

       

        2. Search         functionality added to search photos from API.

                [color=var(--color-accent-fg)]Coming Soon       

               
•                  Cypress                 E2E Tests
         

                [color=var(--color-accent-fg)]Contributing       

        Everyone is welcomed to contribute to this project. You can contribute         either by submitting bugs or suggesting improvements by opening an issue on         GitHub. Please see the [color=var(--color-accent-fg)]CONTRIBUTING guidelines         for more information.

       

        This project was bootstrapped with [color=var(--color-accent-fg)]Create         React App.

https://github.com/Yog9/SnapShot/archive/refs/heads/master.zip

遊客，如果您要查看本帖隱藏內容請回復