Partnerský portál - platforma pro provizní systém

Cílem bylo vytvořit webovou aplikaci, která převezme data z původního projektu, ale bude mít nový design a vylepšenou funkcionalitu.

Co jsem na projektu řešil?

1. Implementace frontendu (Next.js)
2. Napojení databáze (Next.js, MySQL)
3. Deployment

Technologie

Vzhledem k tomu, že původní aplikace neměla žádnou API vrstvu, rozhodl jsem se postavit frontend na frameworku Next.js, který mimo jiné umožňuje tvořit API endpointy v rámci jednoho projektu. Typicky endpoint vypadal třeba takto:

export default async function handler(req, res) {
  try {
    const connection = await pool.getConnection();
    const [rows] = await connection.query(
      'SELECT id, ... FROM users WHERE email = ?',
      [session.user.email],
    );
    connection.release();

    if (rows.length > 0) {
      return res.status(200).json({ user: rows[0] });
    } else {
      return res.status(404).json({ error: 'User does not exist' });
    }
  }

Pro samotné načítání dat do komponent jsem následně implementoval custom hooky, díky kterým byl kód samotných komponent přehlednější.

export function useUserData() {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    const fetchUserData = async () => {
      try {
        const response = await axios.get('/api/user');
        setUserData(response.data.user);
      } catch (error) {
        console.error('Error when loading user data:', error);
      }
    };
    fetchUserData();
  }, []);

  return userData;
}

Funkcionalita

Co se týče funkcionality, stojí za zmínku stránka marketing, kde si uživatel může vybrat typ banneru a na základě jeho unikátního ID se mu vygeneruje HTML kód pro vložení na jeho provizní web.

Deployment

Vzhledem k tomu, že společnost má vlastní serverové řešení, bylo potřeba připravit prostředí s Node.js a na Gitlabu nastavit pipeline, která při commitu do hlavní větve kód otestuje, provede build a nahraje na server.