Planorant is a full-stack web application that allows you and your group of friends to organize, chat and plan ahead your Premier weeks for Valorant. Planorant offers a dynamic, user-friendly interface for managing teams, weeks, agents and availability for each member, as well as chatting with your team. Built with React, Express, MongoDB, Node.js and Socket.IO.
-
π οΈTeam creation and invitation: Users can create a team and invite others with a unique invitation code.
-
ποΈ Week Management: Members of the team can add Premier weeks: select the map and the days of the Premier week.
-
πMember availability and agent selection: Members of the team can set their availability for each day of a Premier week, as well as their prefered agents.
-
π¬Live Chat and Online Members: Plan and discuss srategies with a live chat, see who is online and who is typing, and access the team's message history from anywhere.
-
π±Responsive Design: Adaptable interface for a consistent experience across different devices. Excellent experience in both mobile and desktop.
-
πMongoDB syncronization: Acess your team planner from any device. Every change and chat message is stored in a database for persistence and access from any device
-
πLight and Dark themes: Switch between your preferred light or dark themes, with a consistent and clean design using RippleUI and Radix-UI colors system.
-
π Google Login: Users can easily login and create a user with their Google account.
- Secure login and registration system using Google AuthO.
- New users are prompted to register their username.
- Users can create a team (name and tag)
- Each team gets a unique invitation code for others to join.
- Each week showcases the days available to play according to the availability set by each member.
- Agent preferences for each member for the week.
- Additional link to a Valoplant strategy for that week.
- Every team has its own live chat.
- List of Online Members.
- Typing status, messages grouped by day.
- Excellent experience in both mobile and desktop devices.
- User toggleable light and dark themes with a consistent color pallete.
- React - Frontend framework
- Express.js - Backend framework
- MongoDB - Database
- Node.js - JavaScript runtime
- Tailwind CSS - For styling and responsive design
- Socket IO - Live Chat features
- Node Cron - Database scheduled cleaning of messages
- Ripple UI - Tailwind UI components library
client/
ββ src/
β ββ components/
β β ββ Authenticate/
β β ββ CreateUser/
β β ββ Header/
β β ββ Footer/
β β ββ Main/
β β β ββ PlannerSection/
β β β β ββ NoTeamPage/
β β β β β ββ CreateTeamForm/
β β β β ββ Planner/
β β β β β ββ ChatComponent/
β β β β β β ββ ChatBar/
β β β β β β ββ ChatBody/
β β β β β β ββ ChatFooter/
β β β β β ββ Team/
β β β β β β ββ Week/
β β β β β β β ββ DeleteWeekComponent/
β β β β β β β β ββ DeleteWeekForm/
β β β β β β β ββ Player/
β β β β β β β β ββ AgentSelector/
β β β β β β β ββ CreateWeekComponent/
β β β β β β β β ββ CreateWeekForm/
β β β β β β ββ LeaveTeamComponent/
β β β β β β ββ DeleteTeamComponent/
β β β ββ Profile (WIP)/
β ββ context/
β β ββ AuthContext.jsx
index.js
socket.js
routes/
ββ api.routes.js
controllers/
ββ players.controller.js
ββ teams.controller.js
ββ weeks.controller.js
models/
ββ Player.js
ββ Team.js
ββ Week.js
ββ players.model.js
ββ teams.model.js
ββ weeks.model.js
config/
ββ mongodb.js/
- Alejandro Sanchez - AxelothLeohryn
Thank you for taking a look at my project β€οΈ! Feel free to contribute or suggest improvements. I will continue updating the project to add features and refine functionality, mostly as a learning experience.