|
1 | 1 | # Hikearound Web |
2 | 2 |
|
3 | | -A React-based web application serving as a companion to the Hikearound iOS app. This project is built with Next.js and provides a modern, responsive web interface for hikers to discover and share trails. |
| 3 | +[](https://github.com/hikearound/hikearound-web/actions/workflows/ci.yml) |
| 4 | +[](https://nextjs.org) |
| 5 | +[](https://reactjs.org) |
| 6 | +[](LICENSE) |
4 | 7 |
|
5 | | -## Features |
6 | | - |
7 | | -- 🚀 Modern React-based web application |
8 | | -- ⚡ Next.js framework for server-side rendering |
9 | | -- 🌐 Internationalization support (i18n) |
10 | | -- 🔥 Firebase integration |
11 | | -- 🔍 Algolia search integration |
12 | | -- 🐛 Sentry error tracking |
13 | | -- 📱 Responsive design for all devices |
14 | | - |
15 | | -## Prerequisites |
| 8 | +A Next.js web app for discovering and sharing curated hiking trails. |
16 | 9 |
|
17 | | -- Node.js 18.x |
18 | | -- npm package manager |
19 | | - |
20 | | -## Installation |
21 | | - |
22 | | -1. Clone the repository: |
| 10 | +## Features |
23 | 11 |
|
24 | | -```bash |
25 | | -git clone https://github.com/pdugan20/hikearound-web.git |
26 | | -cd hikearound-web |
27 | | -``` |
| 12 | +- Server-rendered hike pages with SEO metadata |
| 13 | +- Algolia-powered search |
| 14 | +- Interactive Apple MapKit integration |
| 15 | +- Firebase backend integration |
| 16 | +- Internationalization (i18n) |
| 17 | +- Storybook component library |
| 18 | +- Sentry error tracking |
28 | 19 |
|
29 | | -2. Install dependencies: |
| 20 | +## Getting Started |
30 | 21 |
|
31 | 22 | ```bash |
| 23 | +# Install dependencies |
32 | 24 | npm install |
33 | | -``` |
34 | 25 |
|
35 | | -3. Set up environment variables: |
36 | | - |
37 | | -```bash |
| 26 | +# Set up environment |
38 | 27 | cp env.local.tmp .env.local |
39 | | -``` |
| 28 | +# Fill in your API keys |
40 | 29 |
|
41 | | -Then fill in your environment variables in the `.env.local` file. |
42 | | - |
43 | | -## Development |
44 | | - |
45 | | -To start the development server: |
46 | | - |
47 | | -```bash |
| 30 | +# Start dev server |
48 | 31 | npm run dev |
49 | 32 | ``` |
50 | 33 |
|
51 | | -The application will be available at `http://localhost:3000`. |
52 | | - |
53 | | -## Storybook |
54 | | - |
55 | | -This project uses Storybook for component development and documentation. To run Storybook: |
56 | | - |
57 | | -```bash |
58 | | -npm run storybook |
59 | | -``` |
60 | | - |
61 | | -Storybook will be available at `http://localhost:6006`. |
| 34 | +Open [http://localhost:3000](http://localhost:3000) to view the app. |
62 | 35 |
|
63 | | -### Writing Stories |
64 | | - |
65 | | -Stories are located in the `stories` directory alongside their components. Each story file should: |
66 | | - |
67 | | -- Use the `.stories.js` extension |
68 | | -- Export a default object with component metadata |
69 | | -- Include one or more stories that showcase different states of the component |
70 | | - |
71 | | -Example story structure: |
72 | | - |
73 | | -```jsx |
74 | | -import React from 'react'; |
75 | | -import { MyComponent } from './MyComponent'; |
76 | | - |
77 | | -export default { |
78 | | - title: 'Components/MyComponent', |
79 | | - component: MyComponent, |
80 | | -}; |
81 | | - |
82 | | -export const Default = () => <MyComponent />; |
83 | | -export const WithProps = () => <MyComponent prop1='value' />; |
84 | | -``` |
85 | | - |
86 | | -## Building for Production |
87 | | - |
88 | | -To create a production build: |
89 | | - |
90 | | -```bash |
91 | | -npm run build |
92 | | -``` |
93 | | - |
94 | | -To start the production server: |
| 36 | +## Development |
95 | 37 |
|
96 | 38 | ```bash |
97 | | -npm run start |
| 39 | +npm run dev # Start dev server |
| 40 | +npm run build # Production build |
| 41 | +npm run storybook # Component explorer (port 6006) |
98 | 42 | ``` |
99 | 43 |
|
100 | 44 | ## Project Structure |
101 | 45 |
|
102 | | -``` |
| 46 | +```text |
103 | 47 | hikearound-web/ |
104 | 48 | ├── components/ # Reusable React components |
105 | | -├── pages/ # Next.js pages and API routes |
106 | | -├── public/ # Static assets |
107 | | -├── styles/ # Global styles and SCSS |
108 | | -├── utils/ # Utility functions |
| 49 | +├── config/ # Configuration files |
109 | 50 | ├── constants/ # Application constants |
110 | 51 | ├── layouts/ # Page layouts |
111 | | -├── lib/ # Library code and configurations |
112 | | -└── config/ # Configuration files |
| 52 | +├── lib/ # Library code and integrations |
| 53 | +├── pages/ # Next.js pages and API routes |
| 54 | +├── public/ # Static assets |
| 55 | +├── scss/ # SCSS stylesheets |
| 56 | +├── stories/ # Storybook stories |
| 57 | +├── styles/ # Global styles |
| 58 | +└── utils/ # Utility functions |
113 | 59 | ``` |
114 | 60 |
|
115 | | -## Technologies Used |
116 | | - |
117 | | -- Next.js 12.x |
118 | | -- React 17.x |
119 | | -- Firebase |
120 | | -- Algolia Search |
121 | | -- Sentry |
122 | | -- SCSS |
123 | | -- i18next |
124 | | - |
125 | | -## Contributing |
126 | | - |
127 | | -1. Fork the repository |
128 | | -2. Create your feature branch (`git checkout -b feature/amazing-feature`) |
129 | | -3. Commit your changes (`git commit -m 'Add some amazing feature'`) |
130 | | -4. Push to the branch (`git push origin feature/amazing-feature`) |
131 | | -5. Open a Pull Request |
132 | | - |
133 | | -## License |
| 61 | +## Related |
134 | 62 |
|
135 | | -This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. |
| 63 | +- [hikearound-app](https://github.com/hikearound/hikearound-app) - iOS client |
| 64 | +- [hikearound-cloud-functions](https://github.com/hikearound/hikearound-cloud-functions) - Cloud Functions backend |
0 commit comments