UniConnect - Bridging the Gap in Campus Trading

Project Description

UniConnect is a web platform crafted to make life easier for university students. It's a handy way for them to buy, sell, or trade used textbooks, stationery, and other study materials. The goal is simple: to connect students so they can help each other out. Whether you're looking for a good deal on textbooks or want to pass on materials you no longer need, UniConnect has got you covered. 

The idea is to create a community where students can connect based on their needs and preferences. UniConnect is not just about transactions; it's about fostering a sense of community among students. Beyond the obvious benefits of affordable options for students, the platform also aims to do its bit for the environment. By encouraging the reuse of materials, UniConnect contributes to sustainability and helps reduce waste on university campuses.

In a nutshell, UniConnect is here to simplify the process of buying and selling study materials for students while promoting a sense of community and environmentally friendly practices.

Why I chose this Project?

Key Features:

User Interface (UI)

The Email Template I used for Sending Registration link is here:

Code Examples

Redux Implementation:

// actions.js
export const setSearchResults = (results) => ({
  type: 'SET_SEARCH_RESULTS',
  payload: results,
});

// reducers.js
const searchResultsReducer = (state = [], action) => {
  switch (action.type) {
    case 'SET_SEARCH_RESULTS':
      return action.payload;
    default:
      return state;
  }
};

export default searchResultsReducer;

// store.js
import { createStore } from 'redux';
import searchResultsReducer from './reducers';

const store = createStore(searchResultsReducer);

export default store;

State Hooks:

// SearchComponent.js
import React, { useState } from 'react';

const SearchComponent = () => {
  const [searchQuery, setSearchQuery] = useState('');

  const handleSearch = () => {
    // Perform search based on searchQuery
  };

  return (
    <div>
      <input type="text" value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
      />
      <button onClick={handleSearch}>Search</button>
    </div>
  );
};

export default SearchComponent;

Routing and Navigation

// Routing Implementation
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import MaterialDetails from './components/MaterialDetails';

const AppRouter = () => {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/material/:id" component={MaterialDetails} />
        {/* Additional routes can be added as needed */}
      </Switch>
    </Router>
  );
};

export default AppRouter;

 // Route Guards
import React from 'react';
import { Route, Redirect } from 'react-router-dom';

const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect to="/login" />
      )
    }
  />
);

export default PrivateRoute;

Data Fetching

// Fetching data using Axios
import axios from 'axios';

const fetchStudyMaterials = async () => {
  try {
    const response = await axios.get('/api/study-materials');
    return response.data;
  } catch (error) {
    // Handle errors gracefully
    console.error('Error fetching study materials:', error);
    throw error;
  }
};

Additionally, UniConnect incorporates asynchronous operations to ensure that data fetching does not hinder the overall responsiveness of the platform. This asynchronous approach prevents the application from freezing while waiting for data to be retrieved.

Data Integration

The integration of data into UniConnect is a dynamic process. For instance, when a user initiates a search for specific study materials, the application dynamically sends a request to the backend server, which then interacts with external APIs or databases to fetch relevant listings. The retrieved data is then seamlessly integrated into the user interface, providing real-time results.

Public Code Repository:

You can find the source code for UniConnect on GitHub.

Demo Link:

References

For those interested in exploring the technologies and concepts discussed in this article, the following resources are recommended:

• [React.js Documentation]
• [Tailwind CSS Documentation]
• [Material UI Documentation]
• [Redux Documentation]