Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mubassim-khan/my-travel-journal
Travel Journal is a React JS based dynamic website styled with Bootstrap, Google Fonts & Font Awesome. It contains cards of different of places along with its image, description, link of Google Maps & much more.
https://github.com/mubassim-khan/my-travel-journal
dynamic react-router react-router-dom reactjs
Last synced: 1 day ago
JSON representation
Travel Journal is a React JS based dynamic website styled with Bootstrap, Google Fonts & Font Awesome. It contains cards of different of places along with its image, description, link of Google Maps & much more.
- Host: GitHub
- URL: https://github.com/mubassim-khan/my-travel-journal
- Owner: Mubassim-Khan
- License: mit
- Created: 2023-08-26T20:38:23.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-15T19:49:50.000Z (about 1 year ago)
- Last Synced: 2024-01-29T11:09:48.397Z (10 months ago)
- Topics: dynamic, react-router, react-router-dom, reactjs
- Language: JavaScript
- Homepage: https://m-travel-journal.netlify.app/
- Size: 1.65 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Travel Journal
Travel Journal is a React JS based dynamic website styled with Bootstrap, Google Fonts & Font Awesome. It consists of 3 sections:
- Home -> Contains total of 12 cards of famous places all around the world.
- About -> A breif detail about website's functionality & compatiablity.
- Connect with me -> Some links of social media to connect with me.
## Preview
[](https://app.netlify.com/sites/m-travel-journal/deploys)
## Features
- Responsive design: The website adapts to different screen sizes, ensuring a consistent user experience on desktop and mobile devices.
- Interactive components: The page includes interactive elements such as cards, accordian, navbar & footer.
- Cards: The page contains different cards having data, which is fetched by local data from file.
- Multiple Pages: The website includes multiple pages link to Travel Journal for a better UI/UX.
## Links
[Travel Journal (Netlify)](https://m-travel-journal.netlify.app/) - Visit via Netlify
## Tech used 🛠️
- [React](https://reactjs.org/) - UI Library
- [Bootstrap CSS](https://getbootstrap.com/) - CSS Framework
- [Prettier](https://prettier.io/) - Code Formatter
- [Google Fonts](https://fonts.google.com/) - Fonts
- [Font Awesome](https://fontawesome.com/) - Fonts & Icons
## Getting Started
To get started with this project, follow these steps:
1. Clone the repository:
```bash
git clone https://github.com/Mubassim-Khan/Travel-Journal-React-JS.git
```
2. Open the project in your preferred code editor.
3. Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
4. Feel free to modify the code and customize the page according to your preferences. You can update the content, change the colors, or add new features.
## Contributing
Contributions to this project are welcome. If you find any issues or have suggestions for improvements, please open an issue or submit a pull request.
## Contact
If you have any questions, suggestions, or feedback, you can reach out to the project maintainer:
- LinkedIn: [Mubassim Ahmed Khan](https://www.linkedin.com/in/mubassim-ahmed-khan/)
- Email: [[email protected]](mailto:[email protected])
---
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.