ChainSeeker is my first ever full-stack web development project, dedicated to creating a utility app tailored for disc golf enthusiasts. As an avid disc golfer myself, I developed this application to meet the unique needs of the disc golf community.
-
Score Tracking System: Effortlessly record and monitor your disc golf rounds.
-
Create Friend Profiles: You can create friend profiles inside the app so that you can play together and keep track of everyone's scores.
-
Performance Statistics: Track and review your performance and see how well you are doing against your friends.
-
Mobile-First Design: This project was created using a mobile-first approach as the app lends itself to be used typically on the fairway.
-
Responsive Design: Enjoy the app seamlessly on various devices, making it your go-to companion during disc golf adventures.
-
Technological Showcase: ChainSeeker showcases my proficiency in full-stack development, incorporating express, nodeJS, Vite, React, Lottie, MongoDB, and Mongo Atlas.
This project is more than just a showcase of my skills; it's a passion project born out of my love for disc golf. ChainSeeker was crafted with the goal of enhancing the disc golf experience, initially for my personal use and that of a few friends. See you on the fairway!
- Project Title
- Project Description
- Table of Contents
- Live Demo
- Screenshots
- Installation
- Usage
- Technologies
- Features
- Attribution
- Contact
If you'd like to explore the app, you can do so by visiting https://magical-jalebi-893a82.netlify.app/
Feel free to create your own account by using an email and password, or you can use the sample account credentials:
username: Mateo
password: Password123!
- Ensure you have Node.js and npm installed on your machine.
- You need a MongoDB Atlas account for database connectivity.
-
Clone the repository:
git clone https://github.com/itsdavehimself/disc-golf-scorecard-app.git -
Navigate to the project directory:
cd disc-golf-scorecard-app
-
Navigate to the server directory and install dependencies:
cd server && npm install -
Create a .env file
touch .env -
Inside the .env file, create a port variable:
PORT=8080 -
Next create a URI variable for the MongoDB database:
URI='mongodb+srv://your_username:your_password@cluster0.gnnj1tx.mongodb.net/your_database?retryWrites=true&w=majority&appName=AtlasApp'
Be sure to replace 'your_username', 'your_password', and 'your_database' with your actual MongoDB credentials.
-
Lastly, create a SECRET variable used for authenticating logins. It can be any random string of letters, numbers, and symbols, for example:
SECRET='#9XhZ@oD5TjLbN*wR$Gy8p2z!Q6AqFs7UvHc1rKmV' -
Navigate back to the parent directory
cd ..
-
Navigate to the client directory and install dependencies:
cd client && npm install -
Again, create another .env file
touch .env -
Inside the .env file, create an API url variable:
VITE_API_BASE_URL=http://localhost:3000/api
-
While inside the client directory, you can start the client by running the following code:
npm run dev -
In a new terminal, navigate to the server folder
cd server -
Start the server
npm run dev
-
Open your browser and navigate to
http://localhost:5173 -
You will need to create an account to login if you are running the app locally.
-
When logged in, you will be taken to the dashboard where you can explore the different features. I suggest creating a few scorecards and friends, so that you will get to explore the statistics pages for yourself and the friend profiles.
- React.js
- Tailwind CSS
- Lottie
- Chart.js
- Vite
- Express.js
- Node.js
- MongoDB
- npm
- Git
- GitHub
- Visual Studio Code
- ESLint
- Prettier
- User authentication with JWT
- Responsive design for various screen sizes
- CRUD operations for managing user data
- Salting and hashing for encryption of password data
This project is licensed under the MIT License.
The photos used in this app are sourced from the following photographers. I appreciate their creative work and contributions.
All photos are used in accordance with their respective licenses.
Email: davidsmolen@gmail.com