What is Mr.Fullstack?

Mr.Fullstack is an Open-Source full-stack application with a personal AI avatar. It allows developers to create and share their portfolios, receive feedback, and engage with peers. Join a thriving community of developers dedicated to upskilling, displaying their talents, and impressing hiring managers from TECH giants like FANG. Elevate your career, where innovation meets opportunity. Help cultivate a culture of collaboration and support. Become a member today.

Built With 🏗️

Socials

Table of Contents

• What is Mr.Fullstack?
• Table of Contents
• Community
• Contributing
• Getting Started
• Installation
• Contributors
• Resources
• License

Community

For open discussions on features, sharing your ideas, or seeking help with general questions, please visit our Discord.

Contributing

Where to Contribute

Contributors must abide by our Code of Conduct. All activities involving Mr.Fullstack must be respectful and harassment-free.

All issues and bugs are hands-on. Please note that issues with the ADMIN label are internal tasks that will be completed by the Admin team.

New Contributor issues are meant for newer Members.

When in doubt, ask an Admin team member by mentioning us on the issue.

Refactoring

which involves improving the code without modifying behavior, is a great place to help out! Refactors can touch many files, so we encourage breaking big changes into small PRs.

Fixing bugs

is a super fast way to improve the experience for our users! When you're fixing bugs, we appreciate communication in a GitHub issue. If an issue exists, please claim that issue and link it in your PR, otherwise creating an issue is the best first step! Be sure to surround bug fixes with ample tests; bugs are magnets for other bugs. Write tests around bugs!

Features

App features are subjective and might start some debates. If you'd like to propose a new feature, please visit Mr.Fullstack Discord to start a discussion around a new feature or add your input on a pre-existing discussion.

New Members

Create your very own AI Portfolio. Follow the steps in the next section, and sign up to become a member. Make your changes & post your portfolio in the app for feedback.

Getting Started

Prerequisites

Make sure to have NodeJS downloaded & installed on your device.

• npm

  npm install npm@latest -g

  
  
  

• You can confirm NodeJs was installed by running this command

  node --version

  
  

Make sure to have Java downloaded & installed on your computer.

• Java

  npm install java@latest

• You can confirm Java was installed by running this command

  java --version

Make sure to have Maven downloaded & installed on your computer. Maven is dependent on Java and will not work without it.

• Maven

  npm install maven@latest

• You can confirm Maven was installed by running this command

  maven --version

Installation 📀

1. Clone the repo

git clone https://github.com/KedarDev/Mr.FullStack.git

BACKEND

2. Navigate into the Mrfullstack\Backend folder.

   cd backend

3. Since we installed Maven previously we can run maven commands

 mvn clean install

4. You can now run the Backend

   mvn spring-boot:run

FRONTEND

5. Navigate into the Frontend folder.

   cd Frontend

6. While in the Frontend folder Install NPM dependencies

   npm install

7. Create a .env file in the Frontend Directory

8. Paste this code in your .env file

   VITE_API_BASE_URL="http://3.21.104.21:8081"
   
   VITE_APP_EMAILJS_USERID="Mrfullstack"
   
   VITE_APP_EMAILJS_TEMPLATEID="template_9l5cfkj"
   
   VITE_APP_EMAILJS_RECEIVERID="2OhUJul8pNjqhUKFV"
   

9. You can now run the Frontend

   npm run dev

10. Navigate to Mr.FullStack\Frontend\src\assets and replace your content with the default content.

11. Navigate to Mr.FullStack\Frontend\src\constants\index.js and replace the data with your own.

🧑🏿‍💻 Now you can visit Mrfullstack.tech become a Member & post your Portfolio.

Running the project Locally ...🏃🏿‍➡️

DATABASE

PGAdmin is a database management tool we can use to create our database. PGAdmin is dependent on Postgresql.

1. Once PGAdmin is installed Create a database for Mr.Fullstack

2. Insert Tables and Data into the Database with these commands

   • Create a User Table

   CREATE TABLE "User"(
       "userId" INTEGER NOT NULL GENERATED ALWAYS AS IDENTITY,
       "firstName" VARCHAR NOT NULL,
       "lastName" VARCHAR NOT NULL,
       "username" VARCHAR NOT NULL,
       "phone" VARCHAR,
       "emailId" VARCHAR NOT NULL,
       "password" VARCHAR NOT NULL,
       "emailVerified" BOOLEAN NOT NULL,
       "createdOn" TIMESTAMP WITHOUT TIME ZONE NOT NULL,
       CONSTRAINT "User_pkey" PRIMARY KEY("userId"),
       CONSTRAINT "User_emailId_key" UNIQUE ("emailId"),
       CONSTRAINT "User_username_key" UNIQUE ("username"));
   

   • Create a User Exists Procedure

   CREATE OR REPLACE PROCEDURE user_insert_feed("_userId" INTEGER,"_content" VARCHAR,"_picture" VARCHAR)
   LANGUAGE plpgsql
   AS
   $$
   DECLARE 
   userExists INTEGER=0;
   BEGIN
   SELECT COUNT(*) FROM "User" into userExists WHERE "userId"="_userId";
   IF userExists!=1 THEN
   RAISE NOTICE 'Invalid User details';
   ELSE
   INSERT INTO "Feed"("userId","content","picture","createdOn") VALUES("_userId","_content","_picture",now());
   END IF;
   END;
   $$
   

   • Create a Profile Table

    	CREATE TABLE "Profile"(
   "profileId" INTEGER NOT NULL GENERATED ALWAYS AS IDENTITY,
   "userId" INTEGER NOT NULL,
   "headline" VARCHAR NOT NULL,
   "bio" VARCHAR NOT NULL,
   "city" VARCHAR,
   "country" VARCHAR,
   "picture" VARCHAR,
   CONSTRAINT "Profile_pkey" PRIMARY KEY ("profileId"),
   CONSTRAINT "Profile_userId_fkey" FOREIGN KEY ("userId")
   REFERENCES "User" ("userId"));
   
   

   • Create a Feed Table

        CREATE TABLE "Feed"(
    "feedId" INTEGER NOT NULL GENERATED ALWAYS AS IDENTITY,
    "userId" INTEGER NOT NULL,
    "content" VARCHAR NOT NULL,
    "picture" VARCHAR NOT NULL,
    "createdOn" TIMESTAMP WITHOUT TIME ZONE NOT NULL,
    CONSTRAINT "Feed_pkey" PRIMARY KEY ("feedId"),
    CONSTRAINT "Feed_userId_fkey" FOREIGN KEY ("userId")
    REFERENCES "User" ("userId"));
     

   • Create a FeedMetaData Table

       CREATE TABLE "FeedMetaData"(
   "feedMetaDataId" INTEGER NOT NULL GENERATED ALWAYS AS IDENTITY,
   "actionUserId" INTEGER NOT NULL,
   "feedId" INTEGER NOT NULL,
   "isLike" BOOLEAN NOT NULL,
   "comment" VARCHAR,
   "createdOn" TIMESTAMP WITHOUT TIME ZONE NOT NULL,
   CONSTRAINT "FeedMetaData_pkey" PRIMARY KEY ("feedMetaDataId"),
   CONSTRAINT "FeedMetaData_actionUserId_fkey" FOREIGN KEY ("actionUserId")
   REFERENCES "User"("userId"),
   CONSTRAINT "FeedMetaData_feedId_fkey" FOREIGN KEY ("feedId")
   REFERENCES "Feed" ("feedId"));
   

   • Create a Reop Table

   CREATE TABLE "Repo"(
   "repoId" INTEGER NOT NULL GENERATED ALWAYS AS IDENTITY,
   "userId" INTEGER NOT NULL,
   "description" CHARACTER VARYING NOT NULL,
   "tags" VARCHAR NOT NULL,
   "demo" VARCHAR NOT NULL,
   "github" VARCHAR NOT NULL,
   CONSTRAINT "Repo_pkey" PRIMARY KEY ("repoId"),
   CONSTRAINT "Repo_userId_fkey" FOREIGN KEY ("userId")
   REFERENCES "User" ("userId"));
   

You have Successfully created the Mr.fullstack DB 👍🏿

BACKEND

3. Open the terminal, navigate to Mr.FullStack\Backend\src\main\resources\application.yml

   cd Mr.FullStack\Backend\src\main\resources\application.yml
   

4. Edit the application.yml file, and make sure that the project is running locally by changing the data source URL

   url: jdbc:postgresql://localhost:5432/postgres
   

• Make sure to do this to all data sources in the application.yml file

5. Navigate to MrFullStack\Backend\src\main\resources\config.yml under Client Configuration replace the URL

url: http://localhost:3000 

FRONTEND

6. Open your terminal, navigate to the Frontend Folder

   cd Frontend
   

7. Create a .env file in the Frontend Directory

8. Paste this code in your .env file

   VITE_API_BASE_URL="http://localhost:8081"
   
   VITE_APP_EMAILJS_USERID="Mrfullstack"
   
   VITE_APP_EMAILJS_TEMPLATEID="template_9l5cfkj"
   
   VITE_APP_EMAILJS_RECEIVERID="2OhUJul8pNjqhUKFV"
   

   • If you would like to create your own EMAILJS account, make sure to switch UserID, TemplatedID, & ReceiverID credentials from the default ones used in step 3

Now We are ready to run the project Locally ...🏃🏿‍➡️

9. Open the terminal and navigate to Mrfullstack\Backend run the mvn command to start the backend, insure that the backend is started before the Frontend

   mvn spring-boot:run
   

10. Open another terminal and navigate to Mr.FullStack\Frontend run the npm command to start the frontend

npm run dev

Congratulations Mr.Fullstack Should be up and running 👍🏿

What's Next❔

Visit the Resources section to take a deep dive and customize every inch of your portfolio.

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Replace images & data with your own
2. Create your Portfolio Branch (git checkout -b Mrfullstack/USERNAME)
3. Commit your Changes (git commit -m 'Add your message')
4. Push to the Branch (git push origin Mrfullstack/USERNAME)
5. Open a Pull Request

If you have a suggestion to improve this project, please fork the repo and create a pull request. You can also open an issue with the tag "New Contributor". Don't forget to give the project a star ⭐ Thanks again!

Contributors

Kedar . H

Christian Shingiro

Resources

• Mr.Fullstack FIGMA design file. View in prototype mode for web demo.

• Mr.Fullstack Database

• Mr.Fullstack EDR

• Create a Personal AI Avatar

Video1.mp4

• Video Background Remover
• Custom Banner in your terminal when running the backend
• Learn Github
• Figma
• Frontend Portfolio Tutorial
• Springboot tutorial
• download Jar 42.2.28.jre7, or the closest one to it
• Draw.io tutorial
• EmailJS
• JWT
• Create a VITE project.
• Build & Deploy a Full Stack App with AWS
• VSCODE

License

You can find our license here