Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/kedardev/mr.fullstack

Open Source Full Stack AI Portfolio App
https://github.com/kedardev/mr.fullstack

ai apache-maven application backend developer-portfolio frontend fullstack java javascript opensource spring-boot vite

Last synced: about 2 months ago
JSON representation

Open Source Full Stack AI Portfolio App

Awesome Lists containing this project

README 

          
															



 

  



  MrfullstackStamp



 


 



![Typing SVG](https://readme-typing-svg.demolab.com?font=Roboto&weight=900&size=50&duration=5500&pause=2500&color=FFFFFF&background=000000&center=true&vCenter=true&border=fff&width=800&height=80&lines=PORTFOLIO+APP;Showcase+Your+Skills!)












 




## What is Mr.Fullstack?

Mr.Fullstack is an [Open-Source](https://opensource.guide/starting-a-project/)  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 🏗️



 

![My Skills](https://skillicons.dev/icons?i=aws,bootstrap,css,cypress,express,figma,github,hibernate,html,java,js,jenkins,jest,maven,nextjs,nginx,nodejs,npm,postgres,postman,react,spring,stackoverflow,tailwind,threejs,vite,vscode)









 

  Socials









 [![Discord](  https://img.shields.io/badge/Discord-5865F2?style=for-the-badge&logo=discord&logoColor=white)](https://discord.gg/ZSVQ965q) 

      [![X](https://img.shields.io/badge/X-black.svg?logo=X&logoColor=white)](https://x.com/MrfullStack_) 






  ## Table of Contents



mrfullstackmobile



- 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](https://discord.gg/ZSVQ965q).







## 





	

  Contributing 






Where to Contribute



Contributors must abide by our [Code of Conduct](https://github.com/KedarDev/Mr.FullStack?tab=coc-ov-file#). All activities involving Mr.Fullstack must be respectful and harassment-free.



All [issues](https://github.com/KedarDev/Mr.FullStack/issues) and bugs are hands-on. Please note that issues with the [ADMIN](https://github.com/KedarDev/Mr.FullStack/labels/ADMIN) label are internal tasks that will be completed by the Admin team.



[New Contributor](https://github.com/KedarDev/Mr.FullStack/labels/New%20Contributors) 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](https://discord.gg/ZSVQ965q) 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](https://nodejs.org/en/download/package-manager/current) downloaded & installed on your device.







* npm

  ```sh

  npm install npm@latest -g

  ```



  



  



* You can confirm NodeJs was installed by running this command

  ```sh

  node --version

  ```



  


  

Make sure to have [Java](https://www.oracle.com/ca-en/java/technologies/downloads/) downloaded & installed on your computer.







* Java

  ```sh

  npm install java@latest

  ```











 * You can confirm Java was installed by running this command

   ```sh

   java --version

    ```







Make sure to have [Maven](https://maven.apache.org/download.cgi) downloaded & installed on your computer. Maven is dependent on Java and will not work without it.







* Maven

  ```sh

  npm install maven@latest

  ```







* You can confirm Maven was installed by running this command

  ```sh

  maven --version

  ```



### 
Installation 📀



1.  Clone the repo

   ```sh

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

   ```



### BACKEND



2. Navigate into the `Mrfullstack\Backend` folder.

   ```sh

   cd backend

   ```

   

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

  ```sh

   mvn clean install

   ```



4. You can now run the Backend

   ```sh

   mvn spring-boot:run

   ```







   

### FRONTEND



5. Navigate into the `Frontend` folder.

   ```sh

   cd Frontend

   ```



6. While in the `Frontend` folder Install NPM dependencies

   ```sh

   npm install

   ```



7. Create a `.env` file in the Frontend Directory



8. Paste this code in your `.env` file



   ```env



   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`

   ```sh

   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](http://www.mrfullstack.tech) become a Member & post your Portfolio.










## 






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


 






DATABASE

 



[PGAdmin](https://www.pgadmin.org/download/) is a database management tool we can use to create our database. PGAdmin is dependent on Postgresql.



1. Once PGAdmin is installed [Create](https://www.youtube.com/watch?v=XLZSAWl8Upk) a database for Mr.Fullstack 



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



   * Create a User Table

     

   ```SQL



   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

  

    ```SQL



 	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

     

    ```SQL



     	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

   ```SQL



        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

     

    ```SQL



        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

  

    ```SQL



	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`



   ```sh

   

   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



   ```yaml

   

   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

  ```yaml



  url: http://localhost:3000 



  ```



## FRONTEND



6. Open your terminal, navigate to the Frontend Folder



   ```sh



   cd Frontend

   

   ```



7. Create a `.env` file in the Frontend Directory



8. Paste this code in your `.env` file



   ```env



   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](https://www.emailjs.com/) 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



   ```sh

   mvn spring-boot:run

   

   ```



   



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



   ```sh



   npm run dev



   ```



   



   




   

  
 Congratulations Mr.Fullstack Should be up and running 👍🏿 


 






##






   

What's Next❔



  Visit the [Resources](#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







	

		

            

                

                    kedardev

                    


                    Kedar . H

                

	    

			

                

                    CShingo

                    


                    Christian Shingiro

                

	    

		

	







##  



 



   Resources



 





	











- Mr.Fullstack [FIGMA design](https://www.figma.com/design/Z0LRnhclDQVDwdKpocoL94/Mr.FullStack-Design?node-id=40-2&t=yC6T0q2yIf7ftzyb-1) file. View in prototype mode for web demo.

mrfullstack-figma-design











- Mr.Fullstack [Database](https://drive.google.com/file/d/12rOH9fHv3-9z9wLWonpfsWnCrVTos_Xk/view?usp=drive_link)

mrfullstack-DB











- Mr.Fullstack [EDR](https://www.figma.com/board/eMycYZ4KQ8eWTM2ixyJ4mo/MRFULLSTACK-ERD-Figma?node-id=0-1&t=jbsb9oDuOSXS3Q1r-1)

 mrfullstackEDR



 







- Create a Personal [AI Avatar](https://medium.com/@sydnee_sampson/build-and-enhance-your-digital-portfolio-with-a-personal-ai-avatar-a13df19d2697)






https://github.com/user-attachments/assets/db72fda4-8977-426c-85e2-12cd9fde4a50

 








- Video Background [Remover](https://vidbgrem.media.io/app/)

- Custom [Banner](https://fsymbols.com/generators/) in your terminal when running the backend

- Learn [Github](https://www.youtube.com/watch?v=Oaj3RBIoGFc)

- [Figma](https://www.figma.com)

- Frontend Portfolio [Tutorial](https://www.youtube.com/watch?v=0fYi8SGA20k)

- [Springboot](https://www.youtube.com/watch?v=-mwpoE0x0JQ) tutorial

- download [Jar](https://jdbc.postgresql.org/download/)  42.2.28.jre7, or the closest one to it

- [Draw.io](https://www.youtube.com/watch?v=lAtCySGDD48&t=47s) tutorial

- [EmailJS]()

- [JWT](https://dev.to/kimmaida/signing-and-validating-json-web-tokens-jwt-for-everyone-25fb)

- Create a [VITE](https://www.youtube.com/watch?v=XMGOfJxnH7s&t=9s) project.

- Build & Deploy a Full Stack App with [AWS](https://www.youtube.com/watch?v=FHn8c4Rk_yo&t=1511s)

- [VSCODE](https://www.youtube.com/watch?v=KMxo3T_MTvY)

  








##   

 

 



   License

 

 






#

	

 You can find our license [here](https://github.com/KedarDev/Mr.FullStack?tab=MIT-1-ov-file)