Help Needed: GitHub Pages 404 Error for My Productivity Dashboard App

[pbishop90000]

Body

Hi everyone,

I’m having trouble deploying my web app on GitHub Pages and could use some help. I’ve set up a productivity dashboard app, but I'm encountering a 404 error when trying to access the site. Here’s a detailed overview of the issue:

Project Overview:

Name: Productivity Dashboard

Tech Stack: HTML, CSS, JavaScript, Firebase (Authentication and Realtime Database)

Features:

User authentication (sign up, log in, log out)

Task management (add, update, delete tasks)

Firebase Realtime Database integration

Core Features
User Authentication:

Sign Up: New users can create an account with an email and password.

Log In: Existing users can log in with their credentials.

Log Out: Users can sign out of their accounts.

Password Recovery: Users can reset their password if forgotten (in need of being implemented with your help if possible).

Task Management:

Add Task: Users can create new tasks with details such as title, description, and due date.

Update Task: Users can edit existing tasks to update their details or status. (Also in need of help)

Delete Task: Users can remove tasks from their list.

Mark as Completed: Users can mark tasks as completed or pending.

Filter and Search: Users can filter tasks by status or search for specific tasks. (implemented but not working)

User Interface and Experience:

Task Display: Tasks are shown in an organized and visually appealing manner.

Responsive Design: The app adjusts to different screen sizes and devices.

Dark Mode/Light Mode: (If implemented) Users can switch between dark and light themes.

Notifications: (If implemented) Users receive notifications for upcoming deadlines or task updates.

Database Integration:

Realtime Database: Uses Firebase’s Realtime Database to sync task data across devices. (untested)

Data Retrieval: Retrieves and displays user-specific task data. (untested due to not being able to access site)

Data Update: Updates task data in real-time based on user interactions. (added but not working)

Error Handling:

Authentication Errors: Handles errors during login, registration, and other authentication processes.

Database Errors: Manages errors related to database operations like saving or fetching tasks.

Advanced Features:

Task Categories/Tags: Users can categorize tasks or add tags for better organization.

Due Dates and Reminders: Users can set due dates for tasks and receive reminders.

Task Prioritization: Users can prioritize tasks by setting different priority levels.

Customizable Dashboard: Users can customize the layout or appearance of their dashboard. (feature request)

Analytics and Reporting:

Task Statistics: Provides users with statistics or summaries about their tasks, such as completion rates or overdue tasks. (in need of help)

Progress Tracking: Visual representation of progress, such as completion percentages or progress bars. (implemented but not working)

Integration with Other Services:

Calendar Integration: Sync tasks with external calendar services (if implemented).

API Integrations: Integration with third-party APIs for additional functionality. (untested)

Security and Privacy:

Data Encryption: Ensures that user data is encrypted and secure.

Access Controls: Implement access controls to prevent unauthorized access to user data.

Deployment and Hosting:

Current Hosting: Deployed using GitHub Pages.

Build and Deployment Process: Automated build and deployment process using CI/CD tools (if set up).

Repository Link: [Productivity Dashboard Repository]

https://github.com/pbishop90000/Productivity-Dashboard

Current Issues:

404 error{

When I access my GitHub Pages site, I receive a 404 error with the following message:

404

File not found

The site configured at this address does not contain the requested file.

If this is your site, make sure that the filename case matches the URL as well as any file permissions.

For root URLs (like http://example.com/) you must provide an index.html file.

}

Along with issues mentioned above

Details:

I have all my files saved to the main branch

GitHub Pages Configuration: I’ve configured GitHub Pages to use the docs/ folder, but it doesn’t seem to be working as expected. So i tried 'root/' and neither worked

File Structure:** The project repository includes:

index.html

login.html

registration.html

stylesheet.css

script.js (currently saved but all features are built into the html and just need to be updated

Other project files and directories

Steps Taken:

File Location: Verified that index.html and all other files are in the repository

Configuration: Set the GitHub Pages source folder to docs/ and 'root/' in the repository settings.

Commit and Push: Ensured all changes have been committed and pushed to GitHub.

Questions:

File Location: How can I confirm where GitHub Pages is looking for my files? It seems like it’s not finding them even though I’ve set the different folders as the source.

Configuration: Are there additional settings or steps I might have missed for GitHub Pages to correctly serve files from the folders?

Troubleshooting: What other common issues could cause this these errors?

If anyone is willing to join me in this project, it would mean the world to me.

Any advice or suggestions would also be greatly appreciated. Please let me know if you need any more details or have further questions!

Thanks in advance for your help!

Guidelines

• I have read and understood this category's guidelines before making this post.

[tienanh109]

It seems that you're getting a 404 error while trying to deploy the Productivity Dashboard app on GitHub Pages. Here are steps to identify and fix the problem:

1. Check Your GitHub Pages Configuration

Ensure that your GitHub Pages is correctly configured via the repository settings in:

• Head to your repository on GitHub.
• Click the "Settings" tab.
  Scroll down to the "Pages" section.
  Ensure the branch and folder you want to be used are selected as the source for GitHub Pages, usually /docs or /root.

2. File Structure

Make sure that index.html is in the correct directory, as specified in the settings of GitHub Pages.
The index.html file should be placed directly at the top level of the selected folder—for example, /docs/index.html or /root/index.html, because GitHub Pages looks for this file and serves it as the homepage.
Also, check that all the file names and paths are correctly spelt and there are no discrepancies in capitalization or special characters, because file names are case-sensitive.

3. Check for caching issues

This view of updates on GitHub Pages can sometimes get mixed up with the browser caching. Try clearing the browser's cache or opening it in incognito mode to see if that resolves the 404 error.

4. Check Commit and Push

• All changes should be committed; push them into the right branch in GitHub, especially index.html.

Sometimes some issues are due to late deployment that makes your website not deployed yet. Looks like you are in a hurry!

Remember to precompile, then plain html, css, js.

Now! Good luck and happi !

• tienanh109 - ^-^

[ebndev]

Hi @pbishop90000, thanks for posting in GitHub Discussions!

I've gone ahead and moved this post to our Pages category, as this topic may be more relevant there and might help someone give you a nudge in the right direction. 😁

In the meantime, please feel encouraged to explore existing discussions in the category and utilize the search in case other users may have run into the same issue!

[LiteBrite82]

@pbishop90000

Sorry, GitHub Pages does not support full stack applications; front end only.

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬