Revamp of Wright Choice Consulting

This redesigned website will provide a clear and user-friendly experience for potential clients and professionals seeking information about my dad’s private therapy practice, highlighting his expertise and services in a visually appealing format.

Features

• Implement data fetching from a database using a GET request
• Integrate and implement Auth0 to allow for admin login only to view all form entries
• Send newly submitted form data to admin as an email with the Twilio API
• Parse and display retrieved JSON data on admin-only side of the client.
• Utilize React components, props, and state to manage input states form submission.
• Uses SQL to relate table in a database and grab specific data and records.
• Track form submission and display client_entries and professional_entries table on admin-side of the client.

Technologies Used

• Frontend:
  • React
  • Vite
• Backend:
  • JavaScript / Node.js
  • Express.js
  • Nodemon (development)
  • Postgres SQL
• Additional Tools:
  • Jest / RTL
  • Sequelize
  • Auth0
  • Twilio/Sendgrid

Demo

Setup Instructions

1. Project Cloning and Ownership

   • Clone this project repository to your local machine:

     git clone [email protected]:nianokia/wc-consulting.git

   • Remove the existing git repository (optional, to establish local ownership):

     rm -rf .git

2. Install Dependencies

   • For both the client (frontend) and server (backend) directories:

     • Navigate to the respective directory:

       • cd client
       • cd server (after completing client setup)

     • Install required dependencies:

       npm install

   • This will install all the necessary packages for both the frontend (Vite and React) and backend (Express.js, cors, and nodemon).

3. Create a .env file in the server folder.

4. There are two ways to restore the DB dump file the project already contains:

   • A- If you have postgres set up postgres with an User:

     • Run the command psql -U <user> wcc -f db.sql
     • Make sure that you have your Postgres password on hand. The psql console will ask for your password.

   • B- If your initial configuration of postgres doesn't require a User:

     • Run the command psql wcc -f db.sql
     • Inside your server folder, open the file .env.example and copy the correct option for your configuration found there to your new .env file.
       • Your .env might look like:

         DATABASE_URI="postgresql://localhost/wcc"

5. For this template, the name of your db should be wcc.

   ⚠️ If you don't see an wcc db, you can create one. ⚠️

   • From the terminal, navigate to the psql command line with psql and type:

     CREATE DATABASE wcc;

6. Run the App in Browser

   • Concurrently start Frontend & Backend:
     • Navigate to the server directory:

       npm run dev

   The app should now be accessible in your web browser at the specified URL (usually http://localhost:5173).

Implementation Details

• The server.js file will handle the Express server setup and fetch data from database.
• React components will be created in the client directory to manage the app interface, form displays, event submission, and list of events.
• Data fetched from the database will be parsed and displayed in the React components.

Planning Process

Project Timeline

• Trello Board

Project Pitch Mind Map

• Project Pitch Figma

Future Implementations

Stretch Goals :

• Present a pop-up modal on form submission to allow user to review and update submission before sending it
• Implement AI chatbot to answer questions

Resources

(Refer to official documentation for setup specifics)

• Vite Documentation
• Express Documentation
• Sequelize Documentation
• Auth0 Documentation
• Twilio/ Sendgrid Documentation

About the Developer

Nia Wright is a software engineer who primarily works with HTML, CSS, Javascript, and React. Check out her other projects!

License

MIT License

This project is open-source and licensed under the MIT License.