{"id":25963394,"url":"https://github.com/daniel-oyoo/login_page","last_synced_at":"2026-04-09T07:03:25.140Z","repository":{"id":279985966,"uuid":"937147599","full_name":"mark-bit-hub/login_page","owner":"mark-bit-hub","description":"This project is a web application enabling user registration and login, with data securely stored in a MySQL database. It features client-side validation, password hashing, and session management, suitable for a mental wellness platform.","archived":false,"fork":false,"pushed_at":"2025-02-28T15:40:39.000Z","size":21,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-28T20:43:47.224Z","etag":null,"topics":["css","hashing","node-js","sql"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mark-bit-hub.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-22T13:00:06.000Z","updated_at":"2025-02-28T15:40:42.000Z","dependencies_parsed_at":"2025-02-28T20:43:50.812Z","dependency_job_id":"8afeb418-bf56-472e-b8be-95731c5afd01","html_url":"https://github.com/mark-bit-hub/login_page","commit_stats":null,"previous_names":["mark-bit-hub/login_page"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mark-bit-hub/login_page","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mark-bit-hub%2Flogin_page","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mark-bit-hub%2Flogin_page/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mark-bit-hub%2Flogin_page/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mark-bit-hub%2Flogin_page/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mark-bit-hub","download_url":"https://codeload.github.com/mark-bit-hub/login_page/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mark-bit-hub%2Flogin_page/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264506264,"owners_count":23619005,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","hashing","node-js","sql"],"created_at":"2025-03-04T20:30:10.720Z","updated_at":"2025-12-30T22:13:15.391Z","avatar_url":"https://github.com/mark-bit-hub.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Project Title: Mental Wellness Hub - User Authentication and Data Storage\n\nDescription:\n\nThis project is a dynamic web application that allows users to register, log in, and submit forms that store data in a MySQL database. It implements client-side validation using JavaScript and secure authentication mechanisms, including password hashing and session management.\n\nTechnologies Used:\n\nFrontend:\nHTML5\nCSS3\nJavaScript\nBackend:\nNode.js\nExpress.js\nMySQL\nbcrypt (or crypto)\ncors\ncookie-parser\ndotenv\nDatabase:\nMySQL\nSetup and Installation:\n\nPrerequisites:\nNode.js and npm (Node Package Manager) installed.\nMySQL server installed and running.\nGit installed.\nClone the Repository:\nClone the repository from GitHub to your local machine:\nBash\n\ngit clone \u003crepository_url\u003e\ncd \u003crepository_directory\u003e\nInstall Backend Dependencies:\nNavigate to the project directory in your terminal.\nInstall the required Node.js packages:\nBash\n\nnpm install express mysql body-parser cookie-parser cors crypto dotenv\nDatabase Setup:\nCreate a MySQL database named mental_wellness (or as specified in your .env file).\nCreate the users table:\nSQL\n\nCREATE TABLE users (\n    user_id INT AUTO_INCREMENT PRIMARY KEY,\n    username VARCHAR(255) UNIQUE NOT NULL,\n    password VARCHAR(255) NOT NULL\n);\nEnvironment Variables:\nCreate a .env file in the root directory of your project.\nAdd your MySQL database credentials:\nDB_HOST=localhost\nDB_USER=your_mysql_username\nDB_PASSWORD=your_mysql_password\nDB_NAME=mental_wellness\nReplace the place holder values with your own values.\nRun the Backend Server:\nStart the Node.js server:\nBash\n\nnode server.js\nThe server will start running on http://localhost:3000.\nOpen the Frontend:\nOpen the login_page/index.html file in your web browser.\nCode Structure:\n\nserver.js:\nContains the Node.js/Express.js backend code.\nSets up the MySQL database connection.\nHandles user registration and login routes.\nUses bcrypt (or crypto) for password hashing.\nUses cors for cross origin resource sharing.\nServes the static files.\nlogin_page/index.html:\nThe main HTML file for the login and registration page.\nlogin_page/script.js:\nContains the JavaScript code for client-side validation and handling form submissions.\nUses the fetch API to communicate with the backend.\nlogin_page/style.css:\nContains the styling for the web page.\n.env:\nContains the environmental variables for the database connections.\nKey Features:\n\nUser Registration:\nAllows users to create new accounts.\nHashes passwords using SHA-256 (or bcrypt) for security.\nStores user data in the MySQL database.\nUser Login:\nAuthenticates users based on their username and password.\nCompares the hashed password from the database with the provided password.\nUses cookies for session management.\nClient-Side Validation:\nValidates user input using JavaScript.\nProvides real-time feedback to users.\nSecure Authentication:\nUses password hashing to protect user credentials.\nUses cookies to store session information.\nEmotional Intelligence Quotes:\nDisplays a rotation of emotional intelligence quotes.\nHow to Use:\n\nRegistration:\nOpen the application in your browser.\nClick the \"Register\" link.\nEnter your username and password.\nClick the \"Register\" button.\nLogin:\nEnter your username and password.\nClick the \"Login\" button.\nDeployment:\n\nHosting: You can deploy this application to platforms like Heroku, AWS, or Google Cloud.\nDatabase: Ensure your MySQL database is accessible to your deployed application.\nEnvironment Variables: Configure environment variables on your hosting platform.\nHTTPS: Use HTTPS for secure communication.\nContributing:\n\nFork the repository.\nCreate a new branch for your feature or bug fix.\nSubmit a pull request.\n\nDEBUGGING \nDebugging and Troubleshooting:\n\n1. Common Errors and Solutions:\n\nnet::ERR_CONNECTION_REFUSED (Frontend):\nCause: The backend server is not running, or the port is incorrect.\nSolution:\nVerify that the Node.js server is running (node server.js).\nCheck the port number in your fetch requests and ensure it matches the server's port.\nTemporarily disable firewalls.\n404 (Not Found) (Frontend):\nCause: The requested route (e.g., /register, /login) is not defined in the backend.\nSolution:\nCheck your server.js file and ensure the route is defined using app.post('/register', ...) or app.post('/login', ...).\nVerify the URL in your fetch requests.\nSyntaxError: Unexpected token '\u003c', \"\u003c!DOCTYPE \"... is not valid JSON (Frontend):\nCause: The server is sending an HTML error page (e.g., 404) instead of JSON, and the frontend is trying to parse it as JSON.\nSolution:\nFix the underlying issue causing the HTML response (e.g., incorrect route).\nAdd error handling to your javascript fetch requests to check if the response is ok, before attempting to parse the response as json.\nError connecting to MySQL: ... (Backend):\nCause: Incorrect MySQL credentials or database connection issues.\nSolution:\nVerify the database credentials in your .env file.\nEnsure the MySQL server is running.\nMake sure the database exists.\nError inserting user: ... (Backend):\nCause: Duplicate username or other database errors.\nSolution:\nCheck the error message for details.\nImplement proper error handling in your database queries.\nMake sure the users table exists.\nTypeError: Failed to fetch (Frontend):\nCause: This is a very general error, and can be caused by many things.\nSolution:\nCheck the network tab of your browser's developer tools.\nCheck the console of your browser's developer tools.\nCheck the console of your backend server.\nMake sure the backend server is running.\nMake sure the url in the fetch request is correct.\nMake sure that CORS is enabled on the backend.\n2. Debugging Tools and Techniques:\n\nBrowser Developer Tools:\nUse the \"Network\" tab to inspect network requests and responses.\nUse the \"Console\" tab to view JavaScript errors and log messages.\nUse the \"Sources\" tab to set breakpoints and step through JavaScript code.\nNode.js Debugger:\nUse console.log() statements to output variables and track code execution.\nUse the Node.js debugger (e.g., node inspect server.js) for more advanced debugging.\nUse an IDE that has a built in debugger.\nMySQL Client:\nUse a MySQL client (e.g., MySQL Workbench, phpMyAdmin) to inspect the database and run SQL queries.\nError Logging:\nImplement proper error logging in your backend code to capture and record errors.\nUse try catch blocks.\nTesting:\nWrite unit tests and integration tests to catch errors early.\nTest all of your routes.\nIsolate the Problem:\nWhen an error occurs, try to isolate the problem by simplifying the code or testing individual components.\nTest your backend routes with a tool like postman.\nTest your front end fetch requests by making very simple get requests to your backend.\n3. Debugging Workflow:\n\nIdentify the Error:\nNote the error message and where it occurs.\nReproduce the Error:\nTry to reproduce the error consistently.\nIsolate the Cause:\nUse debugging tools and techniques to narrow down the source of the error.\nFix the Error:\nModify the code to correct the error.\nTest the Fix:\nVerify that the error is resolved and that no new errors have been introduced.\nDocument the Fix:\nAdd comments to your code or update your documentation to explain the fix.\n4. Tips for Effective Debugging:\n\nRead Error Messages Carefully: Error messages often provide valuable clues about the problem.\nUse Version Control: Commit your code regularly so you can easily revert to previous versions.\nBreak Down Complex Problems: Divide complex problems into smaller, more manageable tasks.\nAsk for Help: Don't hesitate to ask for help from other developers or online resources.\nTake Breaks: Sometimes, stepping away from the code can help you see the problem from a fresh perspective.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaniel-oyoo%2Flogin_page","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaniel-oyoo%2Flogin_page","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaniel-oyoo%2Flogin_page/lists"}